12、JavaScript继承实现(一)

所有开发者定义的类都可作为基类。出于安全原因，本地类和宿主类不能作为基类。有时，你可能想创建一个不能直接使用的基类，它只是用于给子类提供通用的函数。在这种情况下，基类被看作抽象类。尽管ECMAScript并没有像其他语言那样严格地定义抽象类，但有时它的确会创建一些不允许使用的类。通常，我们称这种类为抽象类。

创建的子类将继承超类的所有属性和方法，包括构造函数及方法的实现。记住，所有属性和方法都是公用的，因此子类可直接访问这些方法。子类还可添加超类中没有的新属性和方法，也可以覆盖超类中的属性和方法。 

 

JavaScript中的继承机制并不是明确规定的，而是通过模仿实现的。

 

• 对象冒充

构造原始的ECMAScript时，根本没打算设计对象冒充（object masquerading）。它是在开发者开始理解函数的工作方式，尤其是如何在函数环境中使用this关键字后才发展出来的。

其原理如下：构造函数使用this关键字给所有属性和方法赋值（即采用类声明的构造函数方式）。因为构造函数只是一个函数，所以可使ClassA的构造函数成为ClassB的方法，然后调用它。ClassB就会收到ClassA的构造函数中定义的属性和方法。

所有的新属性和新方法都必须在删除父类构造函数的代码行后定义，否则，可能会覆盖子类的相关属性和方法。

多层继承代码示例如下：

function classA(sColor) {
	this.color = sColor;
	this.sayColor = function () {
		alert(this.color);
	};
}

//classB继承classA
function classB(sColor, sName) {
	this.newMethod = classA;
	this.newMethod(sColor);
	delete this.newMethod; 
	
	//以下是自己的属性与方法，一般在调用父类构造后定义
	this.name = sName;
	this.sayName = function () {
		alert(this.name);
	};
}
//classC继承classB
function classC(sColor, sName, iNum) {
	this.newMethod = classB;
	this.newMethod(sColor, sName);
	delete this.newMethod; 
	
	//以下是自己的属性与方法，一般在调用父类构造后定义
	this.iNum = iNum;
	this.sayNum = function () {
		alert(this.iNum);
	};
}
var objC = new classC("blue", "name", 10);
objC.sayColor();//blue 
objC.sayName();//name
objC.sayNum();//10

 对象冒充可以支持多重继承 ：

function classZ() {
	this.newMethod = classX;
	this.newMethod();
	delete this.newMethod;

	this.newMethod = classY;
	this.newMethod();
	delete this.newMethod;
               //添加新方法 
          //...
}

这里存在一个弊端，如果ClassX和ClassY具有同名的属性或方法，ClassY具有高优先级，因为继承的是最后的类。除这点小问题之外，用对象冒充实现多继承机制轻而易举。由于这种继承方法的流行，ECMAScript的第三版为Function对象加入了两个新方法，即call()和 apply()。

• call()方法

call()方法是与经典的对象冒充方法最相似的方法。它的第一个参数用作this的对象。其他参数都直接传递给函数自身。例如：

function sayColor(sPrefix, sSuffix) {
	alert(sPrefix + this.color + sSuffix);
}
var obj = new Object();
obj.color = "red"; 
//The color is red, a very nice color indeed. 
sayColor.call(obj, "The color is ", ", a very nice color indeed.");

 

在这个例子中，函数 sayColor() 在对象外定义，即使它不属于任何对象，也可以引用关键字 this 。对象 obj 的 color 属性等于 "red " 。调用 call() 方法时，第一个参数是 obj ，说明应该赋予 sayColor() 函数中的 this 关键字值是 obj 。第二个和第三个参数是字符串。它们与 sayColor() 函数中的参数 prefix 和 suffix 匹配。

要与继承机制的对象冒充方法一起使用该方法，只需将前三行的赋值、调用和删除代码替换即可：

function classB(sColor, sName) {
	//this.newMethod = classA;
	//this.newMethod(sColor);
	//delete this.newMethod; 
	ClassA.call(this, sColor);
	this.name = sName;
	this.sayName = function () {
		alert(this.name);
	};
}

•   apply()方法

apply()方法有两个参数，用作this的对象和要传递给函数的参数的数组。例如：

 

function sayColor(sPrefix, sSuffix) {
	alert(sPrefix + this.color + sSuffix);
}
var obj = new Object();
obj.color = "red"; 
//The color is red, a very nice color indeed. 
sayColor.apply(obj, new Array("The color is ", ", a very nice color indeed."));

 

这个例子与前面的例子相同，只是现在调用的是 apply() 方法。调用 apply() 方法时，第一个参数仍是 obj ，说明应该赋予 sayColor() 中的 this 关键字值是 obj 。第二个参数是由两个字符串构成的数组，与 sayColor() 的参数 prefix 和 suffix 匹配。

 

该方法也用于替换前三行的赋值、调用和删除新方法的代码：

function classB(sColor, sName) { 
	//this.newMethod = classA;
	//this.newMethod(sColor);
	//delete this.newMethod; 
	ClassA.apply(this, new Array(sColor));
	this.name = sName;
	this.sayName = function () {
		alert(this.name);
	};
}

• 原型链

继承这种形式在ECMAScript中原本是用于原型链的。prototype对象的任何属性和方法都被传递给那个类的所有实例 。 原型链利用这种功能来实现继承机制。如果用原型方式重定义前面例子中的类，它们将变为下列形式：

function ClassA() {
}
ClassA.prototype.color = "red";
ClassA.prototype.sayColor = function () {
	alert(this.color);
};
function classB() {
}
ClassB.prototype = new ClassA();

注意，调用 ClassA 的构造函数时，没有给它传递参数。这在原型链中是标准做法。要确保构造函数没有任何参数。

子类的所有属性和方法都必须出现在prototype属性被赋值后，因为在它之前赋值的所有方法都会被删除 。为什么？因为prototype属性被替换成了新对象，添加了新方法的原始对象将被销毁。所以，为ClassB类添加name属性和sayName()方法的代码如下：

function ClassA() {
}
ClassA.prototype.color = "red";
ClassA.prototype.sayColor = function () {
	alert(this.color);
};
function ClassB() {
}
ClassB.prototype = new ClassA(); 
//下面的属性与方法赋值一定要在原型属性赋值后，
//prototype默认为object 
ClassB.prototype.name = "";
ClassB.prototype.sayName = function () {
	alert(this.name);
};
var objA = new ClassA();
var objB = new ClassB();
objA.color = "red";
objB.color = "blue";
objB.name = "name";
objA.sayColor();//red 
objB.sayColor();//blue 
objB.sayName();//name

 

此外，在原型链中， instanceof 运算符的运行方式也很独特。对 ClassB 的所有实例， instanceof 为 ClassA 和 ClassB 都返回 true 。例如：

var objB = new ClassB();
alert(objB instanceof ClassA);//true 
alert(objB instanceof ClassB);//true

 

在 ECMAScript 的弱类型世界中，这是极其有用的工具，不过使用对象冒充时不能使用它。

原型链的弊端是不支持多重继承 。记住，原型链会关键是用另一类型的对象重写类的原有默认 prototype 属性 。

 

原型链持多层继承

虽然原型链不支持多重继承，但支持多层继承，请看：

function Base1() {
}
Base1.prototype.base1Name = "base1Name";
Base1.prototype.getBase1 = function () {
	alert(this.base1Name);
}; 
//Base2继承Base1 
function Base2() {
}
Base2.prototype = new Base1();
Base2.prototype.base2Name = "base2Name";
Base2.prototype.getBase2 = function () {
	alert(this.base2Name);
}; 
//Base3继承Base2 
function Base3() {
}
Base3.prototype = new Base2();
Base3.prototype.base3Name = "base3Name";
Base3.prototype.getBase3 = function () {
	alert(this.base3Name);
};
var base3 = new Base3(); 
//Base3可以访问从父类Base2继承过来的方法 
base3.getBase2();//base2Name
//Base3可以访问从超类Base1继承过来的方法 
base3.getBase1();//base1Name
//当然更可以访问自己的方法 
base3.getBase3();//base3Name
//因为原型链方法，所以支持instanceof 
alert(base3 instanceof Base1);//true 
alert(base3 instanceof Base2);//true 
alert(base3 instanceof Base3);//true 

• 混合方式

这种继承方式使用构造函数定义类，并未使用任何原型。对象冒充的主要问题是必须使用构造函数方式。 这不是最好的选择。不过如果使用原型链，就无法使用带参构造函数了 。开发者该如何选择呢？答案很简单，两者都用。

创建类的最好方式是用构造函数方式定义属性，用原型方式定义方法 。这种方式同样适用于继承机制，用对象冒充继承构造函数的属性，用原型链继承 prototype 对象的方法 。用这两种方式重写前面的例子，代码如下：

function ClassA(sColor) {
	this.color = sColor;
}
ClassA.prototype.sayColor = function () {
	alert(this.color);
};
function ClassB(sColor, sName) {
	ClassA.call(this, sColor);//① 
	this.name = sName;
}
ClassB.prototype = new ClassA();//② 
ClassB.prototype.sayName = function () {
	alert(this.name);
};

 

在此例子中，继承机制由①②两行的代码实现。在第一行显示的代码中，在 ClassB 构造函数中，用对象冒充继承 ClassA 类的 sColor 属性。在第二行的代码中，用原型链继承 ClassA 类的方法。由于这种混合方式使用了原型链，所以 instanceof 运算符仍能正确运行。

下面的例子测试了这段代码：

var objA = new ClassA("red");
var objB = new ClassB("blue", "name");
objA.sayColor();//red 
objB.sayColor();//blue 
objB.sayName();//name 

• 不能采用动态原型方法实现继承

继承机制不能采用动态化的原因是，prototype对象的独特本性。看下面代码：

function ClassA(name) {
	this.name = name;
	if (typeof ClassA._initialized == "undefined") {
		ClassA.prototype.get = function () {
			alert(name);
		};
		ClassA._initialized = true;
	}
}
function ClassB(name, age) {
	ClassA.call(this, name);
	this.age = age;
	if (typeof ClassB._initialized == "undefined") { 
		//不能在ClassB里改变他的prototype属性，即使改变后
		//也只是下一新对象起作用 
		ClassB.prototype = new ClassA();
		ClassB.prototype.get = function () {
			alert(name + " " + age);
		};
		ClassB._initialized = true;
	}
}
var o1 = new ClassB("name", 1); 
//第一次创建的对象时，prototype未生效，以下方法找不着
//o1.get(); 
o1 = new ClassB("name", 1); 
//第二次创建的对象时，prototype才生效 
o1.get();//name 1

 

上面的代码展示了用动态原型定义ClassA与ClassB，错误在于设置ClassB.prototype属性的代码。从逻辑上讲，这个位置是正确的，但从功能上讲，却是无效的。从技术上说来，在代码运行前，对象已被实例化，并与原始的prototype对象联系在一起了。虽然用晚绑定可用在其他非 prototype属性值，但替换prototype对象却不会对该对象产生任何影响。只从第二个对象实例才会反映出这种改变，这就使上面实例变得不正确。
而正确的作法是把ClassB.prototype = new ClassA();提出来放在函数的外面即可，这样从创建第一个对象开始就能生效。