Prototype Inheritance in Javascript
Contents
Prototype

prototype
Foo.prototype.constructor === Foo; // true
f1.__proto__ === Foo.prototype; // true
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__
linkFoo.prototype
f1
have a constructor which isFoo
sinceFoo.prototype
have a constructor
Object.create()
Syntax is Object.create(proto[, propertiesObject])
var newObj = Object.create(obj);
newObj.__proto__ == obj; // true
new
When js running this line:
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
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
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'
es5
ES6 inheritance
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'