需要澄清 Javascript 的基本原理

Question

我了解一点 C#，现在我开始使用 JavaScript，但在理解基础知识方面遇到了一些问题。

这是我的代码示例:

function BaseFunc(x, y) {
    this.X = x;
    this.Y = y;
}

function DerivedFunc(x, y, z) {
    this.Z = z;
    BaseFunc.call(this, x, y);
}

DerivedFunc.prototype = new BaseFunc;   


 function Test() {
    var d = DerivedFunc(1, 2, 3);
    var b = new BaseFunc(4, 5);
    d.sayHello();
    b.sayHello();
}

DerivedFunc.prototype.sayHello = function () {
    alert("Result is: " + (this.X + this.Y + this.Z));
}

在上面的代码中，我试图进行继承。

一切看起来都很好，直到我到达 BaseFunc.call(this, x, y); 这行应该调用基本函数，但是 this 的用途是什么 在此背景下。难道只是为了满足方法call的签名，它是如何工作的？

第二个问题是，在 JavaScript 中我们可以动态添加任何内容，在我的例子中，我添加了一个 sayHello() 属性并为其分配了一个匿名函数。像 DerivedFunc.prototype.sayHello 一样，我是否向 BaseFunc 或 DerivedFunc 添加属性/方法，因为它被添加到原型(prototype)中，所以应该添加据我了解，到 BaseFunc 。但是当我执行上面的代码时，我收到错误 sayHello 未定义。

有人可以帮我解释一下出了什么问题吗，谢谢？

Answer 1

Everything looks good until I reach the line BaseFunc.call(this, x, y); this line is supposed to call base function but what is the use of this in this context.

它的存在是为了在对 BaseFunc 的调用中，this 与在对 DerivedFunc 的调用中具有相同的值，因此this.X = x; 行以及 BaseFunc 中的此类行正在分配给正确的实例。 (调用为 this 设置特定值的函数是函数的 .call 和 .apply 方法所做的事情。)

But when I execute the above code I get error that sayHello is not defined.

如果您在 d.sayHello 中遇到了麻烦，那是因为您错过了 d = DerivedFunc( 行中的 new 运算符1,2,3);。由于 DerivedFunc 当仅作为函数调用而不是通过 new 调用时，没有任何返回值，d 将是 undefined .

<小时/>

请注意，您进行继承的方式虽然很常见，但存在问题。主要问题在这里:

DerivedFunc.prototype = new BaseFunc;

您正在尝试使用一个旨在创建实例并接受参数的函数，以便创建 DerivedFunc 将分配给事物的原型(prototype)实例。那么，BaseFunc 应该如何处理丢失的参数呢？然后，您再次调用它(从 DerivedFunc)来初始化实例。 BaseFunc 正在执行双重任务。

以下是纠正该问题的方法，首先是冗长的版本:

function x() { }
x.prototype = BaseFunc.prototype;
DerivedFunc.prototype = new x;
DerivedFunc.prototype.constructor = DerivedFunc;

或者如果您可以依赖 ES5 的 Object.create:

DerivedFunc.prototype = Object.create(BaseFunc.prototype);
DerivedFunc.prototype.constructor = DerivedFunc;

现在我们不再调用 BaseFunc 来创建原型(prototype)，但我们仍然获取其 prototype 对象作为 DerivedFunc 的底层原型(prototype)的 prototype 对象。我们不再有如何处理 BaseFunc 的参数的问题，并且 BaseFunc 仅按照其设计的调用方式进行调用:初始化各个实例，而不是原型(prototype)。

当然，您不必每次想要派生构造函数时都编写它，而是需要一个帮助程序脚本。

如果您对 JavaScript 继承层次结构感兴趣，您可能想看看我的简短文章 Lineage脚本——不一定要使用，而是要理解这些东西是如何工作的。 page showing how to do things without the script与使用脚本进行比较可能特别有用。