ECMAScript 6

时间:2015-06-02 15:08:02

标签: javascript subclass ecmascript-6 ecmascript-harmony

我最近发现了博士的这篇伟大帖子。 Axel Rauschmayer

http://www.2ality.com/2015/02/es6-classes-final.html

以下代码段粗略地描述了 ECMAScript 6 原型链如何从 ECMAScript 5 的角度工作(第4.2节的原始帖子) :

// ECMAScript 6
class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    ···
}

class ColorPoint extends Point {
    constructor(x, y, color) {
        super(x, y);
        this.color = color;
    }
    ···
}

let cp = new ColorPoint(25, 8, 'green');

ECMAScript 5中的“幕后”视图:

 // ECMAScript 5
 // Instance is allocated here
function Point(x, y) {
    // Performed before entering this constructor:
    this = Object.create(new.target.prototype);

    this.x = x;
    this.y = y;
}
···

function ColorPoint(x, y, color) {
    // Performed before entering this constructor:
    this = uninitialized;

    this = Reflect.construct(Point, [x, y], new.target); // (A)
        // super(x, y);

    this.color = color;
}
Object.setPrototypeOf(ColorPoint, Point);
···

let cp = Reflect.construct( // (B)
             ColorPoint, [25, 8, 'green'],
             ColorPoint);
    // let cp = new ColorPoint(25, 8, 'green');

虽然在上面的代码中我明白这是有效的:

Object.getPrototypeOf(ColorPoint) === Point  //true

因为这个:

Object.setPrototypeOf(ColorPoint, Point);

我很难理解为什么这也是如此,因为我找不到任何“ES5”的解释:

Object.getPrototypeOf(ColorPoint.prototype) === Point.prototype   // true

也许这样的线路丢失..?

Object.setPrototypeOf(ColorPoint.prototype, Point.prototype);

提前谢谢大家。

1 个答案:

答案 0 :(得分:5)

ES5视角中的“引擎盖下视图”不包括这些行 - 它隐藏在...部分中。这段代码的重点是解释与ES5继承的区别,这些差异都是关于this初始化,new.targetsuper行为以及从其他构造函数继承的构造函数。

原型的基本ES5继承仍然存在,并且像以往一样工作:

ColorPoint.prototype = Object.create(Point.prototype, {
    constructor: {value:ColorPoint, writable:true, enumerable:false, configurable:true}
});
// ... further method definitions