Javascript中3种实现继承的方法和代码实例_javascript技巧

继承是我们在实现面向对象编程的时候很重要的一个手段。虽然我们讲不能过度继承，多利用组合代替继承，但是继承总是免不了的。这里要讨论的就是Javascript中的继承机制。

Javascript中实际上是没有继承的概念的，但是我们可以通过一些手段来模仿实现它。这种继承实际上把一个对象复制到另外一个对象内部。你需要注意的是所有的本地类和宿主类是不能作为基类被继承的，主要是为了安全方面的考虑。

Javascript中的继承大约有三类：1.对象冒充；2.原型继承；3.二者的混合。

一、对象冒充

其实对象冒充是跟this关键字紧密联系在一起的（所以说充分理解Javascript中的this关键字是多么的重要:P）。构造函数使用this来给属性和方法赋值，而构造函数也可以看作为一个普通的函数，所以我们就可以使我们的基类的构造函数成为子类的构造函数，然后在子类的内部调用这个函数，那么子类就会得到父类的属性和方法。

原理很简单，那我们怎么实现呢？下面就以代码示例，实际的操作一下。

对象冒充实现方法一，我们最常用的新建对象的方法：

复制代码代码如下:

FhSHTML5中文学习网 - HTML5先行者学习网
var classA = function(name){FhSHTML5中文学习网 - HTML5先行者学习网
 this.name = name;FhSHTML5中文学习网 - HTML5先行者学习网
 this.alertName = function(){FhSHTML5中文学习网 - HTML5先行者学习网
  alert(this.name);FhSHTML5中文学习网 - HTML5先行者学习网
 }FhSHTML5中文学习网 - HTML5先行者学习网
}FhSHTML5中文学习网 - HTML5先行者学习网
 FhSHTML5中文学习网 - HTML5先行者学习网
var classB = function(name,age){FhSHTML5中文学习网 - HTML5先行者学习网
 this.myConstructor = classA;FhSHTML5中文学习网 - HTML5先行者学习网
 this.myConstructor(name);FhSHTML5中文学习网 - HTML5先行者学习网
 delete this.myConstructor;FhSHTML5中文学习网 - HTML5先行者学习网
 FhSHTML5中文学习网 - HTML5先行者学习网
 this.age = age;FhSHTML5中文学习网 - HTML5先行者学习网
 this.alertAge = function(){FhSHTML5中文学习网 - HTML5先行者学习网
  alert(this.age);FhSHTML5中文学习网 - HTML5先行者学习网
 }FhSHTML5中文学习网 - HTML5先行者学习网
}FhSHTML5中文学习网 - HTML5先行者学习网

为了验证以上的方法是否正确，你可以亲自测试下，我将测试用的代码写在下面：

复制代码代码如下:

FhSHTML5中文学习网 - HTML5先行者学习网
var objA = new classA('DK');FhSHTML5中文学习网 - HTML5先行者学习网
objA.alertName();//DKFhSHTML5中文学习网 - HTML5先行者学习网
 FhSHTML5中文学习网 - HTML5先行者学习网
var objB = new classB('DS',20);FhSHTML5中文学习网 - HTML5先行者学习网
 FhSHTML5中文学习网 - HTML5先行者学习网
objB.alertName();//DSFhSHTML5中文学习网 - HTML5先行者学习网
objB.alertAge();//20FhSHTML5中文学习网 - HTML5先行者学习网

这就是所谓的对象冒充了，另外对象冒充还有另外两种实现的方式，虽然它们的实现手段不一样，但是它们的原理是一样的。

对象冒充实现方法二，使用call方法：

复制代码代码如下:

FhSHTML5中文学习网 - HTML5先行者学习网
var classA = function(name){FhSHTML5中文学习网 - HTML5先行者学习网
 this.name = name;FhSHTML5中文学习网 - HTML5先行者学习网
 this.alertName = function(){FhSHTML5中文学习网 - HTML5先行者学习网
  alert(this.name);FhSHTML5中文学习网 - HTML5先行者学习网
 }FhSHTML5中文学习网 - HTML5先行者学习网
}FhSHTML5中文学习网 - HTML5先行者学习网
 FhSHTML5中文学习网 - HTML5先行者学习网
var classB = function(name,age){FhSHTML5中文学习网 - HTML5先行者学习网
 classA.call(this,name);FhSHTML5中文学习网 - HTML5先行者学习网
 FhSHTML5中文学习网 - HTML5先行者学习网
 this.age = age;FhSHTML5中文学习网 - HTML5先行者学习网
 this.alertAge = function(){FhSHTML5中文学习网 - HTML5先行者学习网
  alert(this.age);FhSHTML5中文学习网 - HTML5先行者学习网
 }FhSHTML5中文学习网 - HTML5先行者学习网
}FhSHTML5中文学习网 - HTML5先行者学习网

通过代码也能看出来，第一种方法中我们新建了函数指针指向父类，调用函数，然后将指针删除。而这里我们之间用call方法在this对象下面运行父类的构造函数，实现了同样的目的。另外与call方法相对于的则就是apply方法啦。

对象冒充实现方法三，使用apply方法：

复制代码代码如下:

FhSHTML5中文学习网 - HTML5先行者学习网
var classA = function(name){FhSHTML5中文学习网 - HTML5先行者学习网
 this.name = name;FhSHTML5中文学习网 - HTML5先行者学习网
 this.alertName = function(){FhSHTML5中文学习网 - HTML5先行者学习网
  alert(this.name);FhSHTML5中文学习网 - HTML5先行者学习网
 }FhSHTML5中文学习网 - HTML5先行者学习网
}FhSHTML5中文学习网 - HTML5先行者学习网
 FhSHTML5中文学习网 - HTML5先行者学习网
var classB = function(name,age){FhSHTML5中文学习网 - HTML5先行者学习网
 classA.apply(this,new Array(name));FhSHTML5中文学习网 - HTML5先行者学习网
 FhSHTML5中文学习网 - HTML5先行者学习网
 this.age = age;FhSHTML5中文学习网 - HTML5先行者学习网
 this.alertAge = function(){FhSHTML5中文学习网 - HTML5先行者学习网
  alert(this.age);FhSHTML5中文学习网 - HTML5先行者学习网
 }FhSHTML5中文学习网 - HTML5先行者学习网
}FhSHTML5中文学习网 - HTML5先行者学习网

其实大家可以看到，apply方法跟call方法是非常类似的，只不过传递参数是略有不同罢了。

二、原型继承

大家应该对prototype对象有所了解，原型对象上的所有属性和方法将被传递给类的所有实例，所有当我们把父类的所有属性和方法付给子类的prototype对象时也就相当于实现了我们的继承。

子类想获得父类的所有属性和方法，那我们将父类的一个实例直接付给子类的prototype对象，那我们的子类不就相当于获取了父类的所有对象和方法？

代码示例伺候：

复制代码代码如下:

FhSHTML5中文学习网 - HTML5先行者学习网
var classA = function(){FhSHTML5中文学习网 - HTML5先行者学习网
 this.name = 'DK';FhSHTML5中文学习网 - HTML5先行者学习网
 this.alertName = function(){FhSHTML5中文学习网 - HTML5先行者学习网
  alert(this.name);FhSHTML5中文学习网 - HTML5先行者学习网
 }FhSHTML5中文学习网 - HTML5先行者学习网
}FhSHTML5中文学习网 - HTML5先行者学习网
 FhSHTML5中文学习网 - HTML5先行者学习网
var classB = function(name,age){FhSHTML5中文学习网 - HTML5先行者学习网
 this.name = name;FhSHTML5中文学习网 - HTML5先行者学习网
 this.age = age;FhSHTML5中文学习网 - HTML5先行者学习网
}FhSHTML5中文学习网 - HTML5先行者学习网
 FhSHTML5中文学习网 - HTML5先行者学习网
classB.prototype = new classA();FhSHTML5中文学习网 - HTML5先行者学习网
 FhSHTML5中文学习网 - HTML5先行者学习网
classB.prototype.alertAge = function(){FhSHTML5中文学习网 - HTML5先行者学习网
 alert(this.age);FhSHTML5中文学习网 - HTML5先行者学习网
}FhSHTML5中文学习网 - HTML5先行者学习网

注意这里的父类的构造函数需要确保没有参数。因为即使有构造参数在实现原型继承的时候你也无法传递=.=!

三、混合继承

顾名思义，混合继承就是前两种方式的混合使用了。

复制代码代码如下:

FhSHTML5中文学习网 - HTML5先行者学习网
var classA = function(name){FhSHTML5中文学习网 - HTML5先行者学习网
 this.name = name;FhSHTML5中文学习网 - HTML5先行者学习网
}FhSHTML5中文学习网 - HTML5先行者学习网
 FhSHTML5中文学习网 - HTML5先行者学习网
classA.prototype.alertName = function(){FhSHTML5中文学习网 - HTML5先行者学习网
 alert(this.name);FhSHTML5中文学习网 - HTML5先行者学习网
}FhSHTML5中文学习网 - HTML5先行者学习网
 FhSHTML5中文学习网 - HTML5先行者学习网
var classB = function(name,age){FhSHTML5中文学习网 - HTML5先行者学习网
 classA.call(this,name);FhSHTML5中文学习网 - HTML5先行者学习网
 this.age = age;FhSHTML5中文学习网 - HTML5先行者学习网
}FhSHTML5中文学习网 - HTML5先行者学习网
 FhSHTML5中文学习网 - HTML5先行者学习网
classB.prototype = new classA();FhSHTML5中文学习网 - HTML5先行者学习网
 FhSHTML5中文学习网 - HTML5先行者学习网
classB.prototype.alertAge = function(){FhSHTML5中文学习网 - HTML5先行者学习网
 alert(this.age);FhSHTML5中文学习网 - HTML5先行者学习网
}FhSHTML5中文学习网 - HTML5先行者学习网

使用对象冒充实现了向父类传递参数，同时使用原型继承实现了对公有方法的继承。

说完了这三中继承方式了，下面该说到问题的时候了。

你可能会不解，为什么有了对象冒充，有了原型继承还要再弄出个什么混合继承，对，最重要的也就是这个问题。

1.如果你实际测试一下，你会发现通过对象冒充的方式实现的继承，子类是无法访问到父类的原型链上的方法的。

2.而用原型继承，则会把所有的属性变成共享的属性，如果你同一个子类实现两个实例，你会发现你的所有实例共享所有的属性。

3.但是这肯定是不合适的了。所以就有了混合继承的方式，让属性继续保持私有，同时让子类能够访问父类的原型链的方法。

你可以亲自动手试一下，在对象冒充继承的时候，子类无法访问父类的原型链方法，原型链继承子类的所有实例共享所有父类属性。这里我就不写例子了。

Javascript中3种实现继承的方法和代码实例_javascript技巧_