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(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) ; //2
这里有一个关键的问题，当对象访问原型中的属性时，原型中的属性对于对象来说是只读的，也就是说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 || {} ; target = target || {}; 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{ target[i] = item; } } } 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 || {} ; target = target || {}; 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{ target[i] = item; } } } 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 ; } ;
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》