Prototype chain inheritance

Fell several times in the prototype chain , Today, I will classify it and summarize it a little . stay js in , Object has __proto__ attribute , Generally, this is called implicit prototype , The implicit prototype points to the prototype that constructs the object's constructor . stay js in , Everything is the object , Objects can be generated in the form of constructors and literals .

First of all, let's have a steak proto、prototype、constructor

__proto__： In fact, it is the prototype chain pointer ！ It really points to the ancestor level object .

prototype： This is the prototype object that points to the constructor , In fact, the prototype object is just an ordinary object , It stores the properties and methods that all instance objects need to share ！

constructor： Each prototype object contains a pointer to the constructor , Namely constructor

Here is a tip to help us judge , When seeking an object __proto__ Who was it when , First of all, we need to think about the constructor new Coming out , It points to this constructor prototype Prototype object . There is also a constructor that requires prototype, such as Array.prototype Is equal to [].__proto__ Of , There is also function new Function() Out object .

The following figure can help us understand the whole knowledge points of the prototype chain

        // Foo.__proto__ Because it's through new Function() establish , So the point to Function.prototype
        // Foo.prototype Point to your prototype object , and foo.__proto__ identical 
        // Object,Array,Function It's all through Function Constructors new Coming out , So its __proto__ Point to Function.prototype
        // Function.prototype => Function.prototype.__proto__ = Object.prototype => Object.prototype.__proto__ = null
        // The running results below are true
        console.dir(Foo.__proto__ == Function.prototype);
        console.dir(Foo.__proto__.__proto__ == Object.prototype);
        console.dir(Function.prototype.__proto__ == Object.prototype)
        console.dir(Foo.prototype == foo.__proto__);
        console.dir(Foo.__proto__.__proto__ == obj.__proto__);
        console.dir(Function.prototype == Object.__proto__)
        console.dir(Array.__proto__ == Function.prototype);
        console.dir(Function.__proto__ == Function.prototype);
        console.dir(foo.__proto__.__proto__ == Object.prototype)

Attach several interview questions to share with you

Topic 1

var F = function () {
    }
Object.prototype.a = function () {
    }
Function.prototype.b = function () {
    }
var f = new F()

Method f Can only call a, Unable to use b,F You can call a Methods and b Method , because f.__proto__ No way Function.prototype This link

Topic two

 function Parent(){
    
   this.a = 'Parent'
}
function Tom() {
    
   this.a = 'Tom'
}
Parent.__proto__.print = function(){
    
   console.log(this.a)
}
Parent.print()
Tom.print()
var child = new Parent()
child.print()
// undefined
// undefined
// Uncaught TypeError: child.print is not a function

Parent and Tom All are Function Example , Equivalent to... Therefore Function.prototype There is a print Method , therefore Parent.print() You can call this method , But there is no return value , One reason is that Parent Method not implemented , One is because this At this point, it points to Parent,Parent There's no way a attribute , and child It creates an object based on the constructor ,child.__proto__.__proto__ === Object.prototype, Therefore, it cannot be found on its prototype chain print Method .