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

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

GitHub set upGitHub 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
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
展开阅读全文

没有更多推荐了,返回首页