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

一张图说明

函数

实例(对象)

原型

之间的联系

GitHub set up

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

由上图得出结论：

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

由构造函数产生的实例对象，其

[[prototype]]

属性(不可见，浏览器通常实现为

__proto__

)指向构造函数的原型对象

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

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

基于结论2,3，每个函数的

[[prototype]]

(

__proto__

)属性都指向它的原型对象Function.prototype

基于结论2,3,4，每个函数(基于结论8，除了Object())的原型对象的

[[prototype]]

(

__proto__

)属性都指向Object.prototype

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

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

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

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

console.log(Person.prototype)

person为new Person()产生的实例对象,其

__proto__

属性指向它的原型 Person.prototype

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

结合结论1，定义任意函数，其

__proto__

属性与Function.prototype比较

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

结合结论2,定义任意对象（非 new XXX()实例化对象,非函数),其

__proto__

与 Object.prototype比较

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

函数Person的

__proto__

属性指向Function.prototype

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

原型对象Person.prototype的

__proto__

属性指向Object.prototype

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

Person.prototype的constructor属性与Person比较

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

输出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

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。