JavaScript使用原型和原型链实现对象继承的方法详解
实际上JavaScript并不是一门面向对象的语言，不过JavaScript基于原型链的继承方式、函数式语法，使得编程相当灵活，所以可以利用原型链来实现面向对象的编程。
之前对JavaScript一直都是一知半解，这两天看了一下原型链这一块知识，综合练习了一下JavaScript的对象继承方式。
以下就是原型链和原型的关系，引用网上的一张图
在Javascript中，每个函数都有一个原型属性prototype指向自身的原型，而由这个函数创建的对象也有一个proto属性指向这个原型，而函数的原型是一个对象，所以这个对象也会有一个proto指向自己的原型，这样逐层深入直到Object对象的原型，这样就形成了原型链。
- 基本继承模式
function FatherClass() {
this.type = 'father';
}
FatherClass.prototype.getTyep = function() {
console.log(this.type);
}
FatherClass.prototype.obj = {age: 35};
function ChildClass() {
this.type = 'child';
}
ChildClass.prototype = FatherClass();
ChildClass.prototype.getType = function() {
console.log(this.type);
}
var father = new FatherClass();
var child = new ChildClass();
father.getTyep();
child.getType();
此方法有优点也有缺点，继承的实现很简单，代码简单容易理解，但是子类继承父类的成员变量需要自己重新初始化，相当于父类有多少个成员变量，在子类中还需要重新定义及初始化
function FatherClass(type) {
this.type = type || 'father';
}
function ChildClass(type) {
this.type = type || 'child';
}
ChildClass.prototype = FatherClass();
ChildClass.prototype.getType = function() {
console.log(this.type);
}
var father = new FatherClass('fatClass');
var child = new ChildClass('chilClass');
上面这种情况还只是需要初始化name属性，如果初始化工作不断增加，这种方式是很不方便的。因此就有了下面一种改进的方式。
- 借用构造函数
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
个人综合模式
《Javascript模式》中到圣杯模式就结束了，可是不管上面哪一种方法都有一个不容易被发现的问题。大家可以看到我在'Parent'的prototype属性中加入了一个obj对象字面量属性，但是一直都没有用。我们在圣杯模式的基础上来看看下面这种情况：
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.a的时候，同时父类的原型中的obj.a也会被修改，这就发生了和共享原型同样的问题。出现这个情况是因为当访问child.obj.a的时候，我们会沿着原型链一直找到父类的prototype中，然后找到了obj属性，然后对obj.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) ;
} ;
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数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- 基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
- 基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
- JS面向对象（2） -- this的使用，对象之间的赋值，for...in语句，delete使用，成员方法，json对象的使用，prototype的使用，原型继承与原型链
- 使用apply方法实现javascript中的对象继承
- 使用apply方法实现javascript中的对象继承
- js使用原型实现继承与new一个新对象的方法
- 使用apply方法实现javascript中的对象继承
- 使用apply方法实现javascript中的对象继承
- JavaScript 利用原型和原型链实现对象继承
- 基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
- JavaScript中定义对象原型的两种使用方法
- 使用混合方式实现javascript中对象的继承(推荐使用)
- JavaScript里面向对象的继承：不使用构造函数实现"继承"
- javascript， 原型链，javascript 原型链方法，原型链继承，原型链和作用域链
- javascript模拟实现继承，继承一次父类模板和原型对象
- 基于JavaScript实现继承机制之调用call()与apply()的方法详解
- 使用MVC中的HtmlHelper对象的ActionLink方法，实现一个Javascript:void(0)效果，去调用一个JS方法
- JavaScript使用原型实现继承时应注意的问题
- 算法-javascript自实现继承extend（单次继承原型对象和单次继承构造函数）
- 基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解