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

前言

很多初学者都对函数,实例(对象), 原型之间的关系理不清楚。
网上五花八门的文章很多，要么不知所云，要么是晦涩难懂。
本文意在用最简洁的语言跟示例让初学者理清楚这三者之间的关系，无需理会其内部原理

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

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

更多请参考: JavaScript高级程序设计（第3版）6.2.3 原型模式