通过伪经典实例化（JavaScript）掌握原型继承 [英] Grasping prototypical Inheritance through pseudoclassical instantiation (JavaScript)

问题描述

我试图通过JavaScript传递一个利用继承的测试套件。下面是我到目前为止的代码片段：

I am attempting to pass a test suite utilizing inheritance through JavaScript. Below is a snippet of the code I have so far:

var Infant = function() {
    this.age  = 0;
    this.color = 'pink';
    this.food = 'milk';

};
Infant.prototype.eat = function(){
    return this.eat;
}


var Adolescent = function() {

    this.age = 5;
    this.height = 'short';
    this.job = 'keep on growing';

};

我想继承婴儿班的食物和吃法，但我的尝试已经下降短。我最初的想法是分配这个.Adolescent = Infant.food;但那没用。我知道我需要将Infant设置为Superclass但我正在转动我的轮子

I would like to inherit the food property from the Infant class and the eat method but my attempts have fallen short. my initial thought was to assign this.Adolescent = Infant.food; but that didn't work. I know I need to set Infant as the Superclass but I'm spinning my wheels

推荐答案

在JavaScript中使用构造函数进行继承时，你：

When using constructor functions for inheritance in JavaScript, you:

1. 制作派生的原型属性构造函数一个对象，其原型是base构造函数的 prototype 属性。

1. Make the prototype property of the "derived" constructor an object whose prototype is the prototype property of the "base" constructor.

设置构造函数派生构造函数的 prototype 属性中的属性，指向派生构造函数。

Set the constructor property on the "derived" constructor's prototype property to point to the "derived" constructor.

使用正确的 this 从derived构造函数中调用base构造函数。

Call the "base" constructor from the "derived" constructor with the correct this.

喜欢这样：

var Infant = function() {
    this.age  = 0;
    this.color = 'pink';
    this.food = 'milk';
};
Infant.prototype.eat = function(){
    return /*...something...*/; // Returning `this.eat` doesn't make any sense, that's the function we're in
};

var Adolescent = function() {

    // #3 Give super a chance to initialize the instance, you can pass args if appropriate
    Infant.call(this);

    this.age = 5;
    this.height = 'short';
    this.job = 'keep on growing';
};

// Set up Adolescent's prototype, which uses Infant's prototype property as its prototype
Adolescent.prototype = Object.create(Infant.prototype); // #1
Adolescent.prototype.constructor = Adolescent;          // #2

Object.create was在ES5中添加，因此它不会出现在IE8中过时的JavaScript引擎上。上面使用的单参数版本可以是但是很容易收紧。

Object.create was added in ES5, so it won't be present on obsolete JavaScript engines like the one in IE8. The single-argument version of it used above can be easily shimmed, though.

在ES2015中，我们可以选择使用新的类语义：

In ES2015 we have the option of doing it with the new class semantics:

class Infant {
    constructor() {
        this.age  = 0;
        this.color = 'pink';
        this.food = 'milk';
    }

    eat() {
        return /*...something...*/;
    }
}

class Adolescent extends Infant {            // extends does #1 and #2
    constructor() {
        super();                             // #3, you can pass args here if appropriate

        this.age = 5;
        this.height = 'short';
        this.job = 'keep on growing';
    }
}

这篇关于通过伪经典实例化（JavaScript）掌握原型继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！