一图了解原型链

160 阅读2分钟

前言:

每个函数创建时,都会按照特定的规则:

  1. 创建一个prototype属性(指向原型对象);

  2. 默认情况下,所有原型对象会自动获得一个 constructor属性,指向与之关联的构造函数;

  3. 自定义构造函数时**,原型对象会默认获得constructor属性,其他所有方法都继承自Object

  4. 每次调用构造函数创建新实例,实例内部的[[Prototype]]指针就会被赋值为构造函数的原型对象,脚本中没有访问该特性的方法,但在Safari、Chrome、Firefox中会在每个对象上暴露__proto__属性,能通过这个属性访问对象的原型

functon Foo(){}
let f1 = new foo();
let f2 = new foo();

  1. 构造函数Foo()

    构造函数Foo其原型属性prototype指向其原型对象Foo.prototype。原型对象Foo.prototype的默认属性constructor指向原函数Foo

    console.log(Foo.prototype)
    

    image.png

    构造函数Foo的实例f1,f2,其__proto__属性指向其构造函数的原型对象Foo.prototype,所以实例能共享原型对象上的属性和方法。

    console.log(f1.__proto__, 'f1.__proto__');
    console.log(Foo.prototype, 'Foo.prototype');
    console.log(f1.__proto__ === Foo.prototype); // true
    

    image.png

    构造函数FooFunciton函数创建的实例,所以其__proto__属性指向的是Function函数的原型对象Function.prototype

    console.log(Foo.__proto__, 'Foo.__proto__');
    console.log(Function.prototype, 'Function.prototype');
    console.log(Foo.__proto__ === Function.prototype); // true
    

    image.png

    构造函数Foo的原型对象Foo.prototype(本质上是一个对象),是Object创建的一个实例,因此其__proto__属性指向Object的原型对象Object.prototype

    console.log(Foo.prototype.__proto__, 'Foo.prototype.__proto__');
    console.log(Object.prototype,'Object.prototype');
    console.log(Foo.prototype.__proto__ === Object.prototype) // true
    

    image.png

  2. Function函数

    所有的函数其实都是Function函数的实例,所以所有的函数的__protot__属性都指向Function.prototype

    因为Function函数实例化了它本身,所以Function.__protot__就等于Function.prototype

    console.log(Function.__proto__, 'Function.__proto__');
    console.log(Function.prototype, 'Function.prototype');
    console.log(Function.__proto__ === Function.prototype) // true
    

    image.png

    Function函数的原型对象是Object函数创建的实例,因此Function.prototype.__proto__,指向的是Object的原型对象Object.prototype

    console.log(Function.prototype.__proto__, 'Function.prototype.__proto__');
    console.log(Object.prototype, 'Object.prototype');
    console.log(Function.prototype.__proto__ === Object.prototype) // true
    

    image.png

  3. Object函数

    Object函数实际上是Function函数创建的实例,其__proto__属性指向的就是Function函数的原型对象Function.prototype

    需要注意的是Object.prototype__proto__终止于null

    console.log(Object.prototype.__proto__, 'Object.prototype.__proto__');
    

        image.png

如果上述有什么不对的地方,可以在下方留言评论告知哦!

纯手打,请各位大佬给我点个赞!感谢!

image.png