Understand the prototype and prototype chain basics in JavaScript

Prototype

As you all know, JavaScript does not contain the traditional class inheritance model, but instead uses the prototype prototype model. The code implementation is probably like this

function Student (name) {
 this.name = name;
}
 
var kimy = new Student ("KimY");
 
Student.prototype.say = function () {
 Console.log (this.name + "say");
}

Kimy.say ();
Kimysay

KimY itself is no say method, and when he cannot find the method in his own object, he goes back to his prototype to find it, that is, Student.prototype object. Here we use a constructor student

constructors, __proto__, and prototype chains

In addition to IE browsers, other browsers have deployed a nonstandard __proto__ attribute (two underscores before and after each) on an instance of object, pointing to the object's prototype object, the constructor's prototype property.

Steal a piece of code and a picture

Construction method
function Foo (y) {
 this.y = y;
}
 
foo.prototype.x = ten;
 
Inheritance method "Calculate"
Foo.prototype.calculate = function (z) {return
 this.x + This.y + z;
};
 
Create "B" and "C"
var b = new Foo (a) using Foo mode;
var c = new Foo (a);
 
Invoke Inherited Methods
B.calculate (
c.calculate);//
 
 
Console.log (
 
 b.__proto__ = = Foo.prototype,//true
 c.__proto__ = = Foo.prototype,//true
 
 b.constructor = = = Foo,//
 True C.constructor = = Foo,//true
 Foo.prototype.constructor = = Foo/true
 
 b.calculate = = = B.__proto__.calculate ,//true
 b.__proto__.calculate = = Foo.prototype.calculate/true
 
);

As we can see, each object contains a __proto__ attribute, and B's __proto__ point constructs the prototype attribute of the construction method foo, and Foo.prototype is also an object and itself has a __proto__ The prototype that points to the constructed method object that constructs it. Object.prototype's __proto__ is pointed to null, which forms a prototype chain.

And you need to understand this piece of code.

Object instanceof function
//true
function instanceof Object
//true

What did new do?

There is also a small problem, JS inside common function and constructor form seemingly no big difference (first letter capitalization is not necessary, but usually the first letter of the constructor). What the new keyword has done.

Example

var kimy = new Student ();

New did three things.

var kimy = {}; 

kimy.__proto__ = Student.prototype;

Student.call (KimY);

1. Defines an empty object

2. Set its prototype

3. Initializing objects

This will be able to understand why kimy.__proto__ is pointing to the Student.prototype (the same reference), the original is new in the play a key role!

The above is the entire content of this article, I hope you can enjoy.