Javascript 如何将值从“超类”传递给“子类”答案

【问题标题】：How does Javascript pass values from a "super class" to a "child class"Javascript 如何将值从“超类”传递给“子类”
【发布时间】：2018-03-29 20:28:01
【问题描述】：

我很清楚 javascript 不是基于类的语言。

这里说的是我们在 JavaScript 中进行继承的（其中一种方式）示例：

function Person(name, age) {
        this.name = name;
        this.age = age;
    }

    Person.prototype.introduceSelf = function() {
        console.log("My name is " + this.name + " and I'm " + this.age);
    }

    function Employee(name, age, employeeID) {
        Person.call(this, name, age);
        this.employeeID = employeeID;
    }

    Employee.prototype = Object.create(Person.prototype);

    Employee.prototype.sayEmployeeID = function() {
        console.log('My Employee ID is: ' + this.employeeID);
    }

    var joe = new Employee('Joe', 22, 42);
    joe.introduceSelf() // returns: My name is joe and I'm 22
    joe.sayEmployeeID() // returns: My Employee ID is: 42

我的问题是：如何简单地调用Person.call(this, name, age) 在 Employee 构造函数中，在调用 new Employee(...) 时导致对象具有 name 和 age 属性

我知道它正在调用 Person 函数，其中 this 是 Employee 中的上下文，但目前尚不清楚属性如何进入结果对象。 “幕后”到底发生了什么？

【问题讨论】：

我建议投入大量时间研究 JavaScript 闭包。 stackoverflow.com/questions/111102/…
@Kris 与闭包无关，这只是 javascript 的本质，它在“动态”this 指针上运行，这让那些不理解它的人发疯。这就是为什么您可以在 javascript 中“借用”函数的原因，常见的模式是 Array.prototype.slice.call(nodeList) 在添加 Array.from 之前将 NodeList 转换为数组
这是因为当 new instanceof Employee 被称为 Person 被称为 width 它的 this 绑定到 instanceof Employee。
@PHPglue 我明白它为什么会发生，但不清楚这些属性是如何添加到实例中的。如果您要将代码复制并粘贴到 JS 控制台中，仅运行 Person.call(this, 'window', 1) 不会导致 name 或 age 属性添加到窗口中。只有在构造函数的上下文中调用时，结果对象才具有来自另一个构造函数/对象的属性
它确实有效。 Person.call(this, 'window', 1); console.log(name); 你得到window。 this 在全球范围内就是这样。

标签： javascript oop object inheritance constructor

【解决方案1】：

在对象的方法中，this 上下文属于对象的上下文。对于Person，它是一个instanceof Function，它的this 上下文绑定到全局上下文（客户端JavaScript 中的window）。一个new 实例创建一个new （除了它的原型继承之外独立） 对象和this 上下文绑定到它。如果未指定返回值，new 实例也会返回 this。这也应该解释为什么 EventListener 中的this 上下文附加到它所属的对象...元素。

要以菊花链方式连接您的实例方法，在其中使用return this; 是一种常见做法。

【讨论】：

【解决方案2】：

我知道它正在调用Person 函数，其中this 是Employee 中的上下文

您是否也了解“Employee 中的上下文”是什么？这是new 运算符在运行构造函数的主体之前创建的新实例，即结果对象（new Employee 中的Employee）。详情请见What is the 'new' keyword in JavaScript?。

目前尚不清楚属性如何进入结果对象。 “幕后”到底发生了什么？

属性由分配创建：

this.name = name;
this.age = age;
…
this.employeeID = employeeID;

同样，this 指的是结果对象。在前两种情况下，因为the call method 被显式地用于Person，在后一种情况下，因为new 被用于Emloyee。

【讨论】：