Prototype chain
Before explaining the prototype chain, let's take a look at what happens when you create the object. Next, let's try to analyze what the following code does.
new Date();
What this code does is as follows:
1. Create a new object
2. Connect this object to the prototype chain
3. Bind this
4. Return this object
Ok, we begin to explain the prototype chain. . . So what is a prototype chain?
We all know that each object has its own [[proto]] property, this proto points to the prototype object of the object's constructor. For example
var date = new Date()
console.log(date.__proto__ == Date.prototype) // true
Here comes the key, the prototype object is also an object, so it also has the [[proto]] attribute, then its proto attribute will point to Object.prototype
console.log(Date.prototype.__proto__ == Object.prototype) // true
When you access a property or method that is not on date, date itself may not have the property or method, then you will go to its prototype object to find it, if not, go back to the prototype of the prototype to find it until you find Object.prototype.proto = null (due to editor reasons, no underline is written). This is the prototype chain.
Inheritance After
talking about the prototype, let's take a look at how js implements inheritance. The
first type: object impersonation, disadvantage: unable to inherit the properties on the prototype
function Parent(params){
this.name = params||'父亲';
this.run = function run(){
console.log(`${
this.name}：在跑`)
}
}
Parent.prototype.eat = function(){
console.log('吃饭');
}
function Child(){
Parent.call(this,"儿子")
}
var child =new Child();
child.run()
child.eat()
The second type: prototype inheritance, it is difficult to pass parameters, and it is impossible to change the properties of the parent object through the properties of the child object
function Parent(params){
this.name = params||'父亲';
this.run = function run(){
console.log(`${
this.name}：在跑`)
}
}
Parent.prototype.eat = function(){
console.log('吃饭');
}
function Child(){
this.age = 20;
}
Child.prototype = new Parent;
var child = new Child();
child.run()
child.eat()
The third type: object impersonation + prototype inheritance recommendation combines the first two to make up for the defects of the first two
function Parent(params){
this.name = params||'父亲';
this.run = function run(){
console.log(`${
this.name}：在跑`)
}
}
Parent.prototype.eat = function(){
console.log('吃饭');
}
function Child(){
this.age = 20;
Parent.call(this,'儿子');
}
Child.prototype = new Parent;
var child = new Child();
child.run()
child.eat()
Let's look at the inheritance of es6, which is essentially the inheritance above, but it is just syntactic sugar.
class Parent{
constructor(name){
this.name = name
console.log('父亲：'+this.name);
}
}
class Child extends Parent{
constructor(name,age){
super(name);
this.age = age;
console.log('儿子:'+this.age);
}
}
var child = new Child('zs',20)
At this point, the prototype chain and inheritance are basically mastered, and the next step is to dry goods . Interview
questions: 1. Explain what is the prototype chain.
2. How to implement es5 inheritance is
OK. The prototype chain will be recorded here. If you think I wrote it incorrectly or not Understanding can be private message or comment. If you think the prototype chain I recorded helps you understand, please like it, crab.