再谈javascript原型继承(3)
这里有一个关键的问题，当对象访问原型中的属性时，原型中的属性对于对象来说是只读的，也就是说child对象可以读取obj对象，但是无法修改原型中obj对象引用，所以当child修改obj的时候并不会对原型中的obj产生影响，它只是在自身对象添加了一个obj属性，覆盖了父类原型中的obj属性。而当child对象修改obj.a时，它先读取了原型中obj的引用，这时候child.obj和Parent.prototype.obj是指向同一个对象的，所以child对obj.a的修改会影响到Parent.prototype.obj.a的值，进而影响父类的对象。AngularJS中关于$scope嵌套的继承方式就是模范Javasript中的原型继承来实现的。
根据上面的描述，只要子类对象中访问到的原型跟父类原型是同一个对象，那么就会出现上面这种情况，所以我们可以对父类原型进行拷贝然后再赋值给子类原型，这样当子类修改原型中的属性时就只是修改父类原型的一个拷贝，并不会影响到父类原型。具体实现如下：
var deepClone = function(source,target){
source = source || {} ;
var toStr = Object.prototype.toString ,
arrStr = '[object array]' ;
for(var i in source){
if(source.hasOwnProperty(i)){
var item = source[i] ;
if(typeof item === 'object'){
target[i] = (toStr.apply(item).toLowerCase() === arrStr) : [] ? {} ;
deepClone(item,target[i]) ;
}else{
deepClone(item,target[i]) ;
}
}
}
return target ;
} ;
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) ;
var child = new Child('child') ;
var parent = new Parent('parent') ;
console.log(child.obj.a) ; //1
console.log(parent.obj.a) ; //1
child.obj.a = '2' ;
console.log(child.obj.a) ; //2
console.log(parent.obj.a) ; //1
综合上面所有的考虑，Javascript继承的具体实现如下，这里只考虑了Child和Parent都是函数的情况下：
var deepClone = function(source,target){
source = source || {} ;
var toStr = Object.prototype.toString ,
arrStr = '[object array]' ;
for(var i in source){
if(source.hasOwnProperty(i)){
var item = source[i] ;
if(typeof item === 'object'){
target[i] = (toStr.apply(item).toLowerCase() === arrStr) : [] ? {} ;
deepClone(item,target[i]) ;
}else{
deepClone(item,target[i]) ;
}
}
}
return target ;
} ;
var extend = function(Parent,Child){
Child = Child || function(){} ;
if(Parent === undefined)
return Child ;
//借用父类构造函数
Child = function(){
Parent.apply(this,argument) ;
} ;
//通过深拷贝继承父类原型
Child.prototype = deepClone(Parent.prototype) ;
//重置constructor属性
Child.prototype.constructor = Child ;
} ;
总结
- 上一篇：JSON格式化输出
- 下一篇：让angularjs支持浏览器自动填表
