我最近发现了博士的这篇伟大帖子。 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);
提前谢谢大家。
答案 0 :(得分:5)
ES5视角中的“引擎盖下视图”不包括这些行 - 它隐藏在...
部分中。这段代码的重点是解释与ES5继承的区别,这些差异都是关于this
初始化,new.target
,super
行为以及从其他构造函数继承的构造函数。
原型的基本ES5继承仍然存在,并且像以往一样工作:
ColorPoint.prototype = Object.create(Point.prototype, {
constructor: {value:ColorPoint, writable:true, enumerable:false, configurable:true}
});
// ... further method definitions