Understanding prototypes and prototype chains in javascript

This article introduces the prototype and prototype chain in JavaScript. Friends in need can refer to it.

Prototype

As we all know, JavaScript does not contain the traditional class inheritance model, but uses the prototype prototype model. The code implementation is roughly 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 does not have a say method. When he cannot find the method in his own object, he will go back to his prototype to find it, which is the Student.prototype object. Find in . Here we use a constructor Student

constructor, __proto__ and prototype chain

Except for IE, other browsers are On the instance of the Object object, a non-standard __proto__ attribute (two underscores before and after) is deployed, pointing to the prototype object of the object, that is, the prototype attribute of the constructor.

Stealing a piece of code and a picture

// 构造方法
function Foo(y) {
 this.y = y;
}
 
Foo.prototype.x = 10;
 
// 继承方法"calculate"
Foo.prototype.calculate = function (z) {
 return this.x + this.y + z;
};
 
// 使用foo模式创建 "b" and "c"
var b = new Foo(20);
var c = new Foo(30);
 
// 调用继承的方法
b.calculate(30); // 60
c.calculate(40); // 80
 
 
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
 
);

We can see that each object contains a __proto__ attribute, b __proto__ points to the prototype attribute of Foo, the constructor method of constructing b; and Foo.prototype is also an object, and it also has a __proto__ prototype that points to the constructor method Object that constructs it. Object.prototype's __proto__ is pointed to null, which forms a prototype chain.

You also need to understand this piece of code here:

Object instanceof Function
//true
Function instanceof Object
//true

What does new do

There is also a small problem here, it is ordinary in js There doesn't seem to be much difference in the form of functions and constructors (it is not necessary to capitalize the first letter, but the first letter of the constructor is usually capitalized). What exactly does the new keyword do?

For example:

var Kimy = new Student();

new does three things:

var Kimy = {}; 

Kimy.__proto__ = Student.prototype;

Student.call(Kimy);

1. Defines an empty object

2. Settings Its prototype

3. Initialization object

This way you can understand why Kimy.__proto__ points to Student.prototype (the same reference). It turns out that new plays a key role!

The above is the entire content of this article. I hope you all like it. For more related tutorials, please visit JavaScript Video Tutorial!