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

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

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

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