您的位置:首页 > Web前端 > JavaScript

JavaScript实现继承的方式优化

2017-06-30 19:21 501 查看

组合继承

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

var Parent = function(name){
this.name = name || 'parent';
};
Parent.prototype.getName = function(){
return this.name;
}
Parent.prototype.obj = {a:1};
var Child = function(name){
Parent.apply(this,arguments);
}
Child.prototype = new Parent();
var parent = new Parent('myparent');
var child = new Child('mychild');
console.log(parent.getName());  //myparent
console.log(child.getName());  //mychild


上面这种方法在子类构造函数中通过apply调用父类的构造函数来进行相同的初始化工作,这样不管父类中做了多少初始化工作,子类也可以执行同样的初始化工作。但是上面这种实现还存在一个问题,父类构造函数被执行了两次,一次是在子类构造函数中,一次在赋值子类原型时Child.prototype = new Parent() ;,这是很多余的,所以我们还需要做一个改进:

var Parent = function(name){
this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
Parent.apply(this,arguments) ;
} ;
Child.prototype = Parent.prototype ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

这样我们就只需要在子类构造函数中执行一次父类的构造函数,同时又可以继承父类原型中的属性,这也比较符合原型的初衷,就是把需要复用的内容放在原型中,我们也只是继承了原型中可复用的内容。
上面借用构造函数模式最后改进的版本还是存在问题,它把父类的原型直接赋值给子类的原型,这就会造成一个问题,就是如果对子类的原型做了修改,那么这个修改同时也会影响到父类的原型,进而影响父类对象。

var Parent = function(name){
this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
Parent.apply(this,arguments) ;
} ;
var F = new Function(){} ;
F.prototype = Parent.prototype ;
Child.prototype = new F() ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild


很容易可以看出,通过在父类原型和子类原型之间加入一个临时的构造函数F,切断了子类原型和父类原型之间的联系,这样当子类原型做修改时就不会影响到父类原型。

根据上面的描述,只要子类对象中访问到的原型跟父类原型是同一个对象,那么就会出现上面这种情况,所以我们可以对父类原型进行拷贝然后再赋值给子类原型,这样当子类修改原型中的属性时就只是修改父类原型的一个拷贝,并不会影响到父类原型。具体实现如下:

递归拷贝式继承

function deepClone(initalObj,finalObj){
var obj = finalObj || {};
for(var i in initalObj){ //逐个取对象的属性
if(initalObj.hasOwnProperty(i)){ //判断不是通过原型链继承的属性
if(typeof initalObj[i] === 'object'){ //属性对应的value是object(这里可能是数组)
obj[i] = (initalObj[i].constructor === Array) ? [] : {}; //typeof数组出来的也是“object”,可以用.constructor来判断是否为数组
arguments.callee(initalObj[i],obj[i]);
}else{
obj[i] = initalObj[i];
}
}
}
return obj;
}
var str = {};
var obj = {a: {a: 'hello',b: 21}};
deepClone(obj,str);
console.log(str.a);
var Parent = function(name){
this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
Parent.apply(this,arguments) ;
} ;
Child.prototype = deepClone(Parent.prototype) ;
Child.prototype.constructor = Child ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: