前端面试题总结二(js原型继承)

今天这篇文章整理了JS原型和继承的一些知识点,面试的时候 基!本!都!会!问!还不快认真阅读下文,看看你还有哪些知识点需要掌握吧~

1.原型链

基本思想:利用原型让一个引用类型继承另外一个引用类型的属性和方法。

构造函数,原型,实例之间的关系:每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

原型链实现继承例子:

function
a() {

this
.name =
'张三'
;

}

a.prototype.getName =
function
() {

return
this
.name;

}

function
b() {

this
.name =
'李四'
;

}

//继承了a

b.prototype =
new
a();

b.prototype.getName =
function
(){

return
this
.name;

}

var
instance =
new
b ();

console.log(instance.getName());
//'李四'

改简单点

function a() {

this.name = ‘张三’;

}

a.prototype.getName = function() {

return this.name;

}

var instance = new a();

console.log(instance.getName());//’张三’

2.借用构造函数

基本思想:在子类型构造函数的内部调用超类构造函数,通过使用call()和apply()方法可以在新创建的对象上执行构造函数。

例子:

function
a() {

this
.colors = [
"red"
,
"blue"
,
"green"
];

}

function
b() {

a.call(
this
);
//继承了a

}

var
instance1 =
new
b();

instance1.colors.push(
"black"
);

console.log(instance1.colors);
//"red","blue","green","black"

var
instance2 =
new
b();

console.log(instance2.colors);
//"red","blue","green"

3.组合继承

基本思想:将原型链和借用构造函数的技术组合在一块,从而发挥两者之长的一种继承模式。

function a(name) {

this.name = name;

this.colors = [“red”,”blue”,”green”];

}

a.prototype.sayName = function() {

console.log(this.name);

}

function b(name, age) {

a.call(this,name);//继承属性

this.age = age;

}

//继承方法

b.prototype = new a();

b.prototype.constructor = b;//这个是为了让b的 构造函数
重新指回这个类本身,否则的话它会变成之前继承的那个类的 构造函数
, 在后面再调用的时候可能会出现意想不到的情况

b.prototype.sayAge = function() {

console.log(this.age);

}

var instance1 = new b(“Hong”,18);

instance1.colors.push(“black”);

console.log(instance1.colors);//”red”,”blue”,”green”,”black”

instance1.sayName();//”Hong”

instance1.sayAge();//18

var instance2 = new b(“su”,20);

console.log(instance2.colors);//”red”,”blue”,”green”

instance2.sayName();//”su”

instance2.sayAge();//20

3.寄生组合继承

function
beget(obj){
// 生孩子函数 beget:龙beget龙,凤beget凤。


var
F =
function
(){};


F.prototype = obj;


return
new
F();

}

function
Super(){


// 只在此处声明基本属性和引用属性


this
.val = 1;


this
.arr = [1];

}

// 在此处声明函数

Super.prototype.fun1 =
function
(){};

Super.prototype.fun2 =
function
(){};

//Super.prototype.fun3...

function
Sub(){


Super.call(
this
);
// 核心


// ...

}

var
proto = beget(Super.prototype);
// 核心

proto.constructor = Sub;
// 核心

Sub.prototype = proto;
// 核心

var
sub =
new
Sub();

alert(sub.val);

alert(sub.arr);

这个方式是最佳方式,但是太麻烦,一般只是课本上用,不多解释

4寄生式继承

function
beget(obj){
// 生孩子函数 beget:龙beget龙,凤beget凤。


var
F =
function
(){};


F.prototype = obj;


return
new
F();

}

function
Super(){


this
.val = 1;


this
.arr = [1];

}

function
getSubObject(obj){


// 创建新对象


var
clone = beget(obj);
// 核心


// 增强


clone.attr1 = 1;


clone.attr2 = 2;


//clone.attr3...


return
clone;

}

var
sub = getSubObject(
new
Super());

alert(sub.val);
// 1

alert(sub.arr);
// 1

alert(sub.attr1);
// 1



想了解ES6中的继承请关注下一篇文章

博客园-原创精华区责编内容来自:博客园-原创精华区 (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » 前端面试题总结二(js原型继承)

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录