JavaScript 中的继承和超级

Question

我在学习的第 3 天 JavaScript。我遇到了这段代码：

class B {
    constructor(name) {
        this.name = name;
    }

    printn() {
        return this.name;
    }
}

class A extends B {
    constructor(name, age) {
        super(name);
        this._age = age;
    }

    get age() {
        return this._age;
    }

    printName(){
        return super.printn();
    }
}

let c = new A("Testing", "37");
Console.log(c.printn());

任何人都可以解释这段代码的作用。 constructor 和 super() 关键字是什么？我相信他们是为了继承？我 Google 找到了一些 tuts，但这似乎是最简单的例子，而且几乎没有解释。

我无法使用此代码。

Answer 1

What is the constructor and super() keyword. I believe it is for inheritance?

没错。上面设置了 class B 然后有 class A subclass 它。 constructor 是在您创建 class 的新实例时调用的函数，如代码中的 let c = new A("Testing", "37"); 行所示。与其他一些语言不同，在 JavaScript 中，class.

只能有一个构造函数

super 在子class 中用来指代父class。在构造函数中，你调用 super 就好像它是一个函数一样，它调用了 superclass 的构造函数，让它有机会完成它的任务new 创建的新对象的初始化。因此，例如，在 A 的 constructor 中，super() 调用 B 的 constructor.

您还可以使用 super 作为属性访问器表达式的源来访问 superclass 上的属性（包括方法）。这就是 A 的 printName 方法中发生的事情，它使用 super.printName() 调用 B 的 printName 方法。（这会失败，因为 B 没有 printName 方法；B 的方法被称为 printn。）

如果我没有指出虽然这看起来很像 Java 或 C# 中基于 class 的 OOP，但实际上并非如此。它是使用构造函数设置 JavaScript 的正常 prototypical 继承的语法糖（好的糖）。它极大地简化了使用构造函数设置原型继承层次结构的过程。如果我没有指出使用构造函数进行原型继承是不必要的，那我也是失职了，你可以通过 Object.create.

不使用构造函数来进行原型继承

还有很多东西需要探索。 MDN 可能是一个很好的起点。

I can't get this code to work.

Console.log中的C不应该大写，改成

Console.log(c.printn());

到

console.log(c.printn());

除此之外，如果您使用的是支持 class 的 Java 脚本引擎（例如 Google Chrome 或 Mozilla Firefox 中的脚本引擎），该代码工作正常，但再次注意 A 似乎期望 B 有一个 printName 方法，但它没有，最后的代码正在调用 printn只有 B 有（没关系，这只是意味着 A 的代码并没有真正涉及）。

class B {
    constructor(name) {
        this.name = name;
    }

    printn() {
        return this.name;
    }
}

class A extends B {
    constructor(name, age) {
        super(name);
        this._age = age;
    }

    get age() {
        return this._age;
    }

    printName(){
        return super.printName();
    }
}

let c = new A("Testing", "37");
console.log(c.printn());

Answer 2

欢迎来到JavaScript。祝你好运。我会将您的问题从您的具体问题重述为更一般的问题，即如何最好地学习 JavaScript。

首先，确保您已经组织好您的环境，从您的编辑器或 IDE 开始。无论您选择哪一个，它都应该可以帮助您格式化、缩进、突出显示、检查，甚至可能运行您的代码。花时间学习如何根据自己的喜好配置它。安装有用的插件。您将在 IDE 上花费很多时间。像装修房子一样用心装修它。

接下来，确保您了解在哪里可以找到信息。 SO 上的某些人似乎认为它是一种人力文档服务。 MDN 几乎总是最好的资源。他们还提供教程，这将是一个很好的起点。

接下来，非常熟悉 Chrome devtools。从头到尾阅读文档。了解如何使用控制台、源代码面板、断点和变量监视。归根结底，您必须调试自己的程序，尽管 SO 上的某些人似乎认为他们可以依靠社区来完成这项工作。

现在谈谈语言本身。在深入研究 classes 之前，如果您还没有，我会确保您对基础知识非常熟悉：包括对象和数组在内的数据类型，以及条件和循环等基本控制结构。您应该准确理解对象是什么、属性是什么、如何以文字形式编写对象、如何设置和检索属性以及数组的等效概念。不断编写小程序来尝试；你可以在 devtools 控制台中运行它们。

确保您对函数有扎实的理解。 它们是 JS 逻辑的基本构建块。它们是参数化的逻辑包，接受明确定义的输入（参数）并产生明确定义的输出（return 值）。学习如何定义函数，以及如何调用它们。当你处理一个问题时，考虑如何将它分解成可以作为函数实现的子问题几乎总是一个很好的起点。

熟悉数组和函数后，请确保牢牢掌握以函数为参数的数组方法（函数）。那就对了;在 JavaScript 中，函数是可以作为参数传递给其他函数的值。这是您对函数式编程的第一次温和介绍。学习 forEach 和相关的数组方法，您可以在其中传递一个函数来告诉它如何处理每个元素。

如果你是做前端的，那么你需要对DOM非常熟悉。回到 devtools 并确保你了解如何使用元素面板检查 DOM。了解用于创建元素、设置其属性、将它们插入 DOM 以及在 DOM 中查找它们的基本 DOM API，例如 getElementById。同样，在进行过程中，不断编写小示例程序以确认您在正确的轨道上并巩固您的知识。在掌握 DOM 的同时，您需要开始学习 CSS，这是我们管理属性的方式，这些属性控制 DOM 元素的样式（布局和格式），以及 CSS classes，它们是那些可以通过简单地将 class 分配给元素来应用的属性的集合。花时间掌握级联，这是 CSS 引擎决定将哪个规则应用于哪个元素的过程。再次返回 devtools 并确保您了解如何使用样式检查器检查 DOM 中的 CSS 属性。

你会注意到我们甚至还没有提到 JS classes，这就是你在这里的问题。我有点惊讶您会在学习过程中这么早就深入研究这个主题。类是特定程序设计风格的基础，通常称为面向对象编程或 classical OOP，它涉及设计对象，这些对象是数据和相关功能的捆绑包。有些人认为所有编程都是或应该是 OOP。还有其他人在完全不使用任何 OOP 原则的情况下成功地编写了大型系统。

OOP 的问题在于，现实世界并没有将自己整齐地划分为动物、狗、车辆、汽车以及 A 和 B。在你定义了 Animals 和 Dogs 之后，你意识到你需要介于两者之间的 Mammals，并且在你知道之前你最终得到一个难以理解，维护和扩展的扭曲的 class 层次结构，并且你花费一半的时间重新安排。对于您要解决的 IRL 问题，这台机器的 none 很有可能是必需的。一旦你有了 OOP 锤子，一切都开始看起来像钉子。不久之后，您将用新的 OOP 锤子敲打柔软的意大利面条和果冻块，或者只是在空中挥动它。

JavaScript 中的继承和超级

Inheritance and Super in JavaScript

javascript

inheritance

class

super

ecmascript-6