javascript中继承机制没有明确定义而是同过模仿实现的,总共有三种实现方式分别是:

1.  对象冒充:原理,构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式)。因为构造函数只是一个函数,所以可使 ClassA 构造函数成为 ClassB 的方法,然后调用它。ClassB 就会收到 ClassA 的构造函数中定义的属性和方法。例如,用下面的方式定义 ClassA ClassB

functionClassA(sColor) {

    this.color = sColor;

    this.sayColor = function () {

        alert(this.color);

    };

}

functionClassB(sColor) {

    this.newMethod = ClassA;

    this.newMethod(sColor);

    delete this.newMethod;

}

关键字 this 引用的是构造函数当前创建的对象。不过在这个方法中,this 指向的所属的对象。这个原理是把 ClassA 作为常规函数来建立继承机制,而不是作为构造函数。

在这段代码中,为ClassA 赋予了方法 newMethod(请记住,函数名只是指向它的指针)。然后调用该方法,传递给它的是 ClassB 构造函数的参数 sColor。最后一行代码删除了对 ClassA 的引用,这样以后就不能再调用它。

所有新属性和新方法都必须在删除了新方法的代码行后定义。否则,可能会覆盖超类的相关属性和方法:

functionClassB(sColor, sName) {

    this.newMethod = ClassA;

    this.newMethod(sColor);

    delete this.newMethod;

 

    this.name = sName;

    this.sayName = function () {

        alert(this.name);

    };

}

为证明前面的代码有效,可以运行下面的例子:

var objA= new ClassA("blue");

var objB= new ClassB("red", "John");

objA.sayColor();         //输出 "blue"

objB.sayColor();         //输出 "red"

objB.sayName();

对象冒充可以支持多重继承。也就是说,一个类可以继承多个超类。用 UML 表示的多重继承机制如下图所示:

js call和apply方法小结_继承

例如,如果存在两个类ClassX ClassYClassZ 想继承这两个类,可以使用下面的代码:

 

function ClassZ() {

    this.newMethod = ClassX;

    this.newMethod();

    delete this.newMethod;

 

    this.newMethod = ClassY;

    this.newMethod();

    delete this.newMethod;

}

注:这里存在一个弊端,如果存在两个类ClassX ClassY 具有同名的属性或方法,ClassY 具有高优先级。因为它从后面的类继承。除这点小问题之外,用对象冒充实现多重继承机制轻而易举。

2.  call方法:

callFunction对象的方法。它的第一个参数用作this的对象。其他参数都是直接传递给函数自身eg

functionsayColor(sPrefix,sSuffix) {

    alert(sPrefix + this.color + sSuffix);

};

 

var obj =new Object();

obj.color= "blue";

sayColor.call(obj, "The color is", "a very nice color indeed.");

在这个例子中sayColor在对象外定义,然后通过call方法将函数绑定到对象obj

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

functionClassB(sColor, sName) {

    //this.newMethod = ClassA;

    //this.newMethod(color);

    //delete this.newMethod;

    ClassA.call(this, sColor);

 

    this.name = sName;

    this.sayName = function () {

        alert(this.name);

    };

}

3.  apply方法

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

functionsayColor(sPrefix,sSuffix) {

    alert(sPrefix + this.color + sSuffix);

};

var obj =new Object();

obj.color= "blue";

sayColor.apply (obj, new Array("The color is ", "a very nice colorindeed."));

这个例子与前面的例子相同,只是现在调用的是apply() 方法。调用 apply() 方法时,第一个参数仍是 obj,说明应该赋予 sayColor() 函数中的 this 关键字值是 obj。第二个参数是由两个字符串构成的数组,与 sayColor() 函数中的参数 sPrefix sSuffix 匹配,最后生成的消息仍是 "The color is blue, a very nice color indeed.",将被显示出来。

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

functionClassB(sColor, sName) {

    //this.newMethod = ClassA;

    //this.newMethod(color);

    //delete this.newMethod;

    ClassA.apply(this, new Array(sColor));

    this.name = sName;

    this.sayName = function () {

        alert(this.name);

    };

}

同样的,第一个参数仍是 this,第二个参数是只有一个值color 的数组。可以把 ClassB 的整个 arguments 对象作为第二个参数传递给 apply() 方法:

functionClassB(sColor, sName) {

    //this.newMethod = ClassA;

    //this.newMethod(color);

    //delete this.newMethod;

    ClassA.apply(this, arguments);

    this.name = sName;

    this.sayName = function () {

        alert(this.name);

    };

}

4.  原型链

prototype对象是一个模板,要实例化的对象都以这个模板为基础。prototype对象的任何属性和方法都被传递给那个类的所有实例。原型链利用这种功能来实现继承机制。

如果用原型方式重定义前面例子中的类,它们将变为下列形式:

functionClassA() {

}

 

ClassA.prototype.color= "blue";

ClassA.prototype.sayColor= function () {

    alert(this.color);

};

 

functionClassB() {

}

ClassB.prototype = new ClassA();

原型方式的神奇之处在于突出显示的蓝色代码行。这里,把ClassBprototype属性设置成ClassA的实例。

这很有意思,因为想要ClassA的所有属性和方法,但又不想逐个将它们设置为ClassBprototype属性。还有比把ClassA的实例赋予prototype属性更好的方法吗?

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

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

functionClassB() {

}

 

ClassB.prototype= new ClassA();

 

ClassB.prototype.name= "";

ClassB.prototype.sayName= function () {

    alert(this.name);

};

黑体字的意思是这样会报错:

js call和apply方法小结_继承_02

可通过运行下面的例子测试这段代码:

var objA= new ClassA();

var objB= new ClassB();

objA.color= "blue";

objB.color= "red";

objB.name= "John";

objA.sayColor();

objB.sayColor();

objB.sayName();

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

 

var objB= new ClassB();

alert(objBinstanceof ClassA);  //输出"true"

alert(objBinstanceof ClassB);  //输出"true"

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

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

5,。混合方式

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

functionClassA(sColor) {

    this.color = sColor;

}

 

ClassA.prototype.sayColor= function () {

    alert(this.color);

};

 

functionClassB(sColor, sName) {

   ClassA.call(this, sColor);//以普通方法的形式调用ClassA的构造函数

    this.name = sName;

}

ClassB.prototype = new ClassA();//继承ClassA的原型方法

ClassB.prototype.sayName= function () {

    alert(this.name);

};

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

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

var objA= new ClassA("blue");

var objB= new ClassB("red", "John");

objA.sayColor();         //输出 "blue"

objB.sayColor();         //输出 "red"

objB.sayName();       //输出"John"