深入理解JavaScript原型和原型链

在JavaScript中原型和原型链是很抽象的概念，对于大多数人也是最难理解的一部分，掌握原型和原型链的本质是JavaScript进阶的重要一环。分享一下我对JavaScript原型和原型链的理解。
一、函数对象
JavaScript 中，万物皆对象。但对象也是有区别的，分为：普通对象和函数对象，Object 、Function 是 JS 自带的函数对象。

var myNewObject1 = {};//myNewObject1为普通对象
        var myNewObject2 = new Object();//myNewObject2为普通对象
        var myNewObject3 = new fun1();//myNewObject3为普通对象

        function fun1(){};//fun1为函数对象
        var fun2 = function(){};//fun2为函数对象
        var fun3 = Function('str','console.log(str)');//fun3为函数对象

        console.log(typeof Object);//function
        console.log(typeof Function)//function

        console.log(typeof fun1);//function
        console.log(typeof fun2);//function
        console.log(typeof fun3);//function

        console.log(typeof myNewObject1);//object
        console.log(typeof myNewObject2);//object
        console.log(typeof myNewObject3);//object

二、构造函数
每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包含一个指向原型对象的内部指针
JS 在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做proto 的内置属性，用于指向创建它的构造函数的原型对象。对象 person1 有一个 proto属性，创建它的构造函数是 Person，构造函数的原型对象是 Person.prototype ，所以：

person1和person2都是Person的实例。这两个实例都有一个constructor属性，该属性指向person
三、原型和原型链

function Person(){} var person1 = new Person(); console.log(person1.__proto__ === Person.prototype); // true console.log(Person.prototype.__proto__ === Object.prototype) //true console.log(Object.prototype.__proto__) //null Person.__proto__ == Function.prototype; //true console.log(Function.prototype)// function(){} (空函数) var num = new Array() console.log(num.__proto__ == Array.prototype) // true console.log( Array.prototype.__proto__ == Object.prototype) // true console.log(Array.prototype) // [] (空数组) console.log(Object.prototype.__proto__) //null console.log(Array.__proto__ == Function.prototype)// true

自己是由自己创建的，好像不符合逻辑，但仔细想想，现实世界也有些类似，你是怎么来的，你妈生的，你妈怎么来的，你姥姥生的，……类人猿进化来的，那类人猿从哪来，一直追溯下去……，就是无，（NULL生万物）
正如《道德经》里所说“无，名天地之始”。
总结：每个对象都有 proto 属性，但只有函数对象才有 prototype 属性

深入理解JavaScript原型和原型链

猜你喜欢