一张图说明 函数, 实例(对象), 原型之间的关系

一张图说明函数 实例(对象) 原型之间的联系

 

GitHub set up

 

图片来源:www.cnblogs.com/wilber2013/…

由上图得出结论：

1. 每个函数都有一个prototype属性指向另一个对象，这个对象就叫函数的原型对象

2. 由构造函数产生的实例对象，其[[prototype]]属性(不可见，浏览器通常实现为__proto__)指向构造函数的原型对象

3. 每个函数，都可以认为是通过new Function()实例化的对象

4. 不是通过构造函数(new XXX())实例化的对象(非函数)，都可以认为是new Object()实例化的对象

5. 基于结论2,3，每个函数的[[prototype]](__proto__)属性都指向它的原型对象Function.prototype

6. 基于结论2,3,4，每个函数(基于结论8，除了Object())的原型对象的[[prototype]](__proto__)属性都指向Object.prototype

7. 原型对象的constructor属性指向构造函数(与1刚好相反)

8. Object.prototype.__proto__指向null

示例代码：

function Person(){}

Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
 console.log(this.name);
};

var person = new Person();
person.sayName(); //"Nicholas"

var person1 = new Person();
person1.sayName(); //"Nicholas"

console.log(person.sayName == person1.sayName); //true

基于上述定义的示例函数,验证以上结论

1. Person为构造函数,其中prototype属性指向它的原型对象 Person.prototype,

        console.log(Person.prototype)

2. person为new Person()产生的实例对象,其__proto__属性指向它的原型 Person.prototype

        person.__proto__ === Person.prototype   //true
        Person.prototype.isPrototypeOf(person) //true
        Object.getPrototypeOf(person) === Person.prototype //true

3. 结合结论1，定义任意函数，其__proto__属性与Function.prototype比较

    function fn () {}
    fn.__proto__ === Function.prototype  //true

4. 结合结论2,定义任意对象（非 new XXX()实例化对象,非函数),其__proto__与 Object.prototype比较

        var obj = {}
        obj.__proto__ === Object.prototype  //true

5. 函数Person的__proto__属性指向Function.prototype

        Person.__proto__ === Function.prototype //true
        Object.__proto__ === Function.prototype //true

6. 原型对象Person.prototype的__proto__属性指向Object.prototype

        Person.prototype.__proto__ === Object.prototype //true
        Function.prototype.__proto__ === Object.prototype //true

7. Person.prototype的constructor属性与Person比较

        Person.prototype.constructor === Person     //true
        Function.prototype.constructor === Function  //true
        Object.prototype.constructor === Object     //true

8. 输出Object.prototype.__proto__的值

    console.log(Object.prototype.__proto__)  //null

简而言之：

对于函数：函数XXX的prototype属性，指向XXX.prototype(函数原型对象)

对于对象：XXX实例化的对象的[[prototype]](也就是__proto__)属性,指向XXX.prototype

对于原型：XXX.prototype的constructor属性都指向构造函数XXX

总结

1. 我们需要牢记两点：①__proto__和constructor属性是对象所独有的；② prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有__proto__和constructor属性。
2. __proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（父对象）里找，一直找，直到__proto__属性的终点null，再往上找就相当于在null上取值，会报错。通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链。
3. prototype属性的作用就是让该函数所实例化的对象们都可以找到公用的属性和方法，即f1.__proto__ === Foo.prototype。
4. constructor属性的含义就是指向该对象的构造函数，所有函数（此时看成对象了）最终的构造函数都指向Function。

作者：再见孙悟空2009
链接：https://juejin.im/post/5a104588f265da432a7b2afe
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。