彻底搞明白原型链

原型链.png

1.任何函数都可以通过new来创建实例

    let Func = function(){}
    function Animal(){}
    let afunc = new Func();
    let sheep = new Animal();

2.每一个实例都有一个 proto

console.log(afunc);//有 __proto__
console.log(sheep);//有 __proto__

console截图.png

3.每一个类或者函数都有个prototype属性

class Person{}  
let Func = function(){}
function Animal(){}
console.dir(Person) 
console.dir(Func) 
console.dir(Animal) 

console截图.png

4.所有的构造函数都是Function实例

我们打印Person，Func，Animal可以发现，他们也有个proto，并且 constructor是Function

console截图.png

5.prototype对象是Object的实例

我们打印Person，Func，Animal可以发现，他们的protype也有个proto，并且 constructor是Object

console截图.png

图中代码

function Person(){}
let son = new Person();
console.log(son.__proto__ === Person.prototype);  //true
console.log(Person.__proto__ === Function.prototype);  //true
console.log(Person.prototype.__proto__ === Object.prototype); //true
console.log(Object.__proto__=== Function.prototype);  //true

Function.prototype.a = 'a';
Object.prototype.b = 'b';
function Person(){};
var son = new Person();
console.log(son.a) // undefined
console.log(son.b) // 'b'

原型链相关面试题

• 面试题目1

var F = function () {};
Object.prototype.a = function () {
    console.log('a')
 };
Function.prototype.b = function () {
    console.log('b')
}
var f = new F();
执行：
f.a()//a()
f.b()//没有
F.a()//a()
F.b()//b()

函数是可以同时拥有Object和Function身上挂载属性，我们看图解题

• 函数如果自身没有该字段，会自动向上查找，会找到Function，如果Function没有，会自动找到Object，所以函数会同时拥有Function和Object的字段

• 而实例只会拥有他自身的构造函数和Object身上的字段

• 面试题2

function Parent() {
        this.a = 'Parent';
    }
    function Tom() {
        this.a = 'Tom'
    }
    //parent的原型链是Function,所以下面的代码就类似Function.prototype.print = function(){ console.log(this.a)}
    Parent.__proto__.print = function () {
        console.log(this.a) //this指的是.前面那个对象，也就是Parent和Tom构造函数
    }
    Parent.print()// undefined 
    Tom.print()//Parent
    var child = new Parent()
    child.print() // child没有print方法，因为print方法是挂载到Function身上的

• 面试题3

function Parent() {
    this.a = 1;
    this.b = [1, 2, this.a];
    this.c = {
        demo: 5
    };
    this.show = function () {
        console.log(this.a, this.b, this.c.demo,this.name,this.age);
    }
}
Parent.prototype.name='123';
Parent.__proto__.age='111';

let p1 = new Parent();
let p2 = new Parent();
p1.a=5;
p2.a=10;
p1.name='aaa';
p1.show();//5,[1,2,1] 5 'aaa'  undefined
p2.show();//10 [1,2,1] 5 '123'  undefined