关于js中使用call实现继承

最新推荐文章于 2025-05-24 10:02:27 发布

原创最新推荐文章于 2025-05-24 10:02:27 发布 · 643 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

Js 专栏收录该内容

6 篇文章

订阅专栏

本文通过具体示例解析了JavaScript中构造函数、call方法的工作原理及this关键字的作用机制。阐述了如何利用call方法实现继承，并解释了构造函数内部this的含义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

call/apply网上有很多说明，但基本上都没有阐释它的实际运行机制，总是说将A的方法全部给了B,但是原因是什么，我还没看到有那篇文章说明过。说明之前首先必须要说先说明几个概念。

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

function ClassB(sColor, sName) {   
    ClassA.call(this, sColor);
    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

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

在ClassA(),ClassB()中我没有写return 语句，或者你写“return 2”返回基本类型时，是默认返回this的。然后this也是一个很复杂的玩意，在这里是构造函数中的this,这种情况下，this一开始是一个空对象，原型指向ClassA()的prototype属性,实例化时this.Saycolor=function(){//do sth}给this赋值。
所以objA.sayColor()可以使用。
ClassA.call(this, sColor)可以这么理解，就是把ClassA中的this，换成(this,sColor)中的this,也即是将ClassA中this替换为ClassB的this，所以实例化ClassB时其中的this,不仅仅在ClassA中被赋值了，也在ClassB中被赋值了，即this.color=sColor;this.Saycolor=function(){}。
所以objB可以调用sayColor(),因为objB==this,这个ClassA的this又在ClassB中被赋值过。