JavaScript类继承详解：call方法与原型链实现

JavaScript继承简介

继承简介

JavaScript中的继承机制比其他面向对象语言更为复杂。在多数其他面向对象语言中，继承一个类通常只需使用一个关键字即可完成。而在JavaScript中，若要实现公用成员的继承，需要采取一系列特定的措施。JavaScript采用原型式继承，这种灵活性允许我们既使用标准的基于类的继承方式，也能采用更细致的原型式继承。需要明确的是，JavaScript中的一切继承均通过prototype实现，且其核心是基于对象进行继承的。

使用call方法实现继承

继承：

function Animal(name){ 
this.name = name; 
this.showName = function(){ 
alert(this.name); 
} 
} 
function Cat(name){ 
Animal.call(this, name); 
} 
var cat = new Cat("Black Cat"); 
cat.showName();

调用Animal.call(this)的含义是使用Animal对象替换当前的this对象，这样Cat对象便拥有了Animal的所有属性和方法，从而可以直接调用Animal的方法和属性。

多继承：

function Class10() 
{ 
this.showSub = function(a,b) 
{ 
alert(a-b); 
} 
} 
function Class11() 
{ 
this.showAdd = function(a,b) 
{ 
alert(a+b); 
} 
} 
function Class2() 
{ 
Class10.call(this); 
Class11.call(this); 
}

实现多重继承非常简单，只需连续使用两个call方法即可达成。

JavaScript的继承方式不止一种，例如还可以使用原型链，但这部分不属于本文讨论范围，此处仅说明call的用法。提及call时，自然也会提到apply，这两个方法功能基本一致，区别在于call的第二个参数可以是任意类型，而apply的第二个参数必须是数组或arguments对象。

原型链继承示例与问题分析

接下来介绍如何在JavaScript中实现简单的继承？

下面的示例将创建一个雇员类Employee，该类从Person类继承了prototype中的所有属性。

function Employee(name, sex, employeeID) {
this.name = name;
this.sex = sex;
this.employeeID = employeeID;
}
// 将Employee的原型指向Person的一个实例
// 因为Person的实例可以调用Person原型中的方法, 所以Employee的实例也可以调用Person原型中的所有属性。
Employee.prototype = new Person();
Employee.prototype.getEmployeeID = function() {
return this.employeeID;
};
var zhang = new Employee("ZhangSan", "man", "");
console.log(zhang.getName()); // "ZhangSan

上述关于继承的实现方式较为粗糙，且存在诸多问题：

在创建Employee构造函数和原型（后文简称类）时，便对Person进行了实例化，这种做法是不恰当的。

Employee的构造函数无法调用父类Person的构造函数，这导致在Employee构造函数中对name和sex属性进行了重复赋值。

Employee中的函数会覆盖Person中的同名函数，由于缺乏重载机制（这与上一条属于同类问题），导致功能异常。

创建JavaScript类的语法显得过于零散，不如C#或Java中的语法优雅。

实现过程中存在constructor属性指向错误的情况。