Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prototype chains in ECMAScript 6

I recently came across this great post by Dr. Axel Rauschmayer:

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

The following snippet roughly describes how ECMAScript 6 prototype chains work from an ECMAScript 5 point of view (section 4.2 of the original post):

// 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');

"Under the hood" view in 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');

While in the code above I understand that this is valid:

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

because of this:

Object.setPrototypeOf(ColorPoint, Point);

I'm struggling to understand why this is also true since I can't find any "ES5" explanation:

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

Maybe a line like this is missing..?

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

Thank you all in advance.

like image 760
stratis Avatar asked Jun 02 '15 15:06

stratis


1 Answers

That "under-the-hood view" from the ES5 perspective doesn't include those lines - it's hidden in the ... sections. The point of this code is to explain the differences from ES5 inheritance, which are all about this initialisation, new.target, super behaviour, and constructor functions inheriting from other constructor functions.

The basic ES5 inheritance for the prototypes is still in place, and works like it always did:

ColorPoint.prototype = Object.create(Point.prototype, {
    constructor: {value:ColorPoint, writable:true, enumerable:false, configurable:true}
});
// ... further method definitions
like image 126
Bergi Avatar answered Sep 20 '22 00:09

Bergi