Prototype Inheritance in Javascript

2020-08-21 367 words 2 minutes

Contents

Prototype

1
2
Foo.prototype.constructor === Foo; // true
f1.__proto__ === Foo.prototype; // true

1
f1.constructor === Foo; // true

f1 don’t have constructor, however depends on prototype chain engine will search f1.__proto__. This is line is equivalent to Foo.prototype.constructor === Foo

f1 instantiate a Foo:

f1.__proto__link Foo.prototype
f1 have a constructor which is Foo since Foo.prototype have a constructor

Object.create()

Syntax is Object.create(proto[, propertiesObject])

1
2
var newObj = Object.create(obj);
newObj.__proto__ == obj; // true

new

When js running this line:

1
let person1 = new Person(...);

new actually doing:

Creates a blank, plain JavaScript object person1 = {};
Links (sets the constructor of) this object to another object; person1.constructor is Person
Passes the newly created object from Step 1 as the this context; this -> person1
Returns this if the function doesn’t return an object.

Prototype Chain

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
var obj = {
    func: function () {
        return this.x;
    },
};

var newObj = Object.create(obj);

newObj.__proto__ == obj; // true

newObj; // {}
newObj.func; // f(){return this.x}
newObj.x = 10;
newObj.y = 20;
newObj; // {x: 10, y: 20}
newObj.func(); // 10
obj.func(); // undefined

ES5 inheritance

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function SuperType(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}
SuperType.prototype.sayName = function () {
    alert(this.name);
};
function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}
SubType.prototype = Object.create(SuperType.prototype, {
    constructor: {
        value: SubType,
        enumerable: false,
        writable: true,
        configurable: true,
    },
});
SubType.prototype.sayAge = function () {
    alert(this.age);
};
let instance = new SubType('gim', '17');
instance.sayName(); // 'gim'
instance.sayAge(); // '17'

ES6 inheritance

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
class SuperType {
    constructor(name) {
        this.name = name;
        this.colors = ['red', 'blue', 'green'];
    }
    sayName() {
        alert(this.name);
    }
}
class SubType extends SuperType {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
    sayAge() {
        alert(this.age);
    }
}
let instance = new SubType('gim', '17');
instance.sayName(); // 'gim'
instance.sayAge(); // '17'