javascript中如何模拟继承机制

最新推荐文章于 2025-04-29 16:53:55 发布

最新推荐文章于 2025-04-29 16:53:55 发布 · 126 阅读

文章标签：

8 篇文章

订阅专栏

本文介绍了一种JavaScript中的继承实现方法，通过将一个构造函数作为另一个构造函数的方法并调用它来实现属性和方法的继承。此外，还介绍了如何使用call和apply方法来改进这一过程，并讨论了通过覆盖prototype实现继承的方法。

构造函数使用this关键字给所有属性和方法赋值，因为构造函数仅仅是一个普通函数，因此可以使ClassA的构造函数成为ClassB的方法，然后调用它。ClassB会收到ClassA的构造函数中定义的属性和方法。

很抽象的一段话，具体的实现应该是什么样子的呢？我们先看一段简单的代码：


function ClassA(sColor) {
  this.color = sColor;
  this.printColor = function() {alert(this.color);}
}

function ClassB(){
}

this所指向的是构造函数当前创建的对象，但是在这里，我们应当把ClassA这个函数本身就看作是对象，而this就是指向ClassA的。

因此，这里的ClassA应该是常规的函数(this所指向的)，而不再是构造函数。

下面这段代码改写了ClassB，实现了所谓的继承：



function ClassB(sColor){
  this.newMethod = ClassA;
  this.newMethod(sColor);
  delete this.newMethod;
}

在这里，我们首先为ClassB 创建了一个新的方法newMethod，并将其指向ClassA（记住ClassA只是个普通的方法），然后调用这个方法。最后再将其删去。

!
还记得ClassA方法里面的this么？现在它指向谁了？想明白了这个道理，你就能明白为什么下面的代码可行了：
！


var objB = new ClassB("sColor");
objB.printColor();//print sColor;

这种方式太过于流行，以至于ECMA决定为此添加两个新的方法，即call（）和apply（）。

call()方法的第一个参数用作this的对象引用，而后面的参数则保持不变：


function ClassB(sParam){
  alert(this.sColor);
  alert(sParam);
}

var obj = new Object();
obj.sColor = "red";

ClassB.call(obj, "yes");

第一个参数说明了由谁来调用ClassB，即决定了this的属性。

利用call（）方法，上面的代码就可以改写成：


function ClassB(sColor){
  ClassA.call(this, sColor);
}

apply跟call函数很接近，第一个参数是要调用的对象，而第二个函数则是要传递参数的数组。其他的基本一致。

其实即使我们不采用模拟继承的方式，apply和call函数也是非常好用的。具体怎么使用，就看程序的需求了。

最后一种方法，不同于之前的所有办法，采用了覆盖prototype的方式：


function ClassA(){
}

function ClassB(){
}

ClassB.prototype = new ClassA();

这种方式的好处的，如果你使用instanceof方法，会发现ClassB的实例类型也是ClassA。
缺点则是，构造函数不能有参数。