Prototype and prototype chain

[[prototype]]

Javascript Object has a special [[prototype]] Built in properties , It is actually a reference to other objects . Almost all objects are created [[prototype]] Will be given a non null value .
Object.create() Create an object and put the [[prototype]] Relate to the specified object .
All ordinary [[prototype]] The chain will eventually point to the built-in Object.prototype,

class

function Foo() {
}
Foo.prototype;

var a = new Foo();
Object.getPrototypeOf(a) == Foo.prototype // true

Foo.prototype.constructor == Foo // true
a.constructor == Foo // true

call new Foo() Will create a new object a, to a One [[prototype]] link , Related to Foo.prototype Object to point to ;
a.constructor A function that points to an associated object , actually a There is no such thing as constructor attribute ,
.constructor Reference delegated to Foo.prototype, and Foo.prototype.constructor Point to Foo.a.constructor Just by default [[prototype]] Delegation points to Foo, This has nothing to do with construction .

Foo.prototype Of .constructor Property is just Foo Default attribute when function is declared , If you create a new object and replace the function default .prototype Object reference , Then the new object does not automatically get .constructor attribute .

function Foo() {
}
Foo.prototype = {};

var a = new Foo();
a.constructor == Foo  // false
a.constructor == Object // true

a did not .constructor attribute , So I will entrust [[prototype]] On the chain prototype, But this object doesn't have .constructor attribute ( default Foo.prototype It has this property ), So I will continue to entrust , This time it will be entrusted to the top of the chain Object.prototype, Of this object .constructor Property points to the built-in Object function .

stay JavaScript in , We don't put an object （‘ class ’） Copy to another object （‘ example ’）, Just connect them .

Prototype inheritance

function Foo(name) {
	this.name = name;
}
Foo.prototype.myName = function () {
	return this.name;
}
function Bar(name, label) {
	Foo.call(this, name)
	this.label = label;
}

Bar.prototype = Object.create(Foo.prototype);
Bar.prototype.myLabel = function () {
	return this.label;
}

var a = new Bar('a', 'obj a');
a.myName(); // 'a'
a.myLabel(); // 'obj a'

call Object.create() A new object will be created out of thin air and the [[prototype]] Relate to the specified object (Foo.prototype). Bar.prototype = Object.create(Foo.prototype); Create a new Bar.prototype And associate it to Foo.prototype, Put the original Bar.prototype Abandon .

There are two ways to write in question ：

//  Does not create an association to Bar.Fprototype New object , Just let Bar.prototype quote Foo.prototype object ,
//  When executed Bar.prototype.myLabel It will be modified directly Foo.prototype Object itself .
 Bar.prototype = Foo.prototype;

//  Although it will create an association to Bar.Fprototype New object , But use Foo Constructor call for , If Foo Functions have side effects , It will affect Bar The offspring of , The consequences are unimaginable .
 Bar.prototype = new Foo();

stay ES6 Before, we could only set up __proto__ Attribute implementation , But this method is not standard and incompatible .ES6 Added auxiliary functions Object.setPrototypeOf(), Associations can be modified in a standard and reliable way .

Bar.prototype = Object.create(Foo.prototype)
Object.setPrototypeOf(Bar.prototype, Foo.prototype)

— Reference resources 《 You don't know? Javascript On 》