學到原型的時候感覺頭都大了/(ㄒoㄒ)/~~ 尤其是ptototype和__proto__ 傻傻分不清? 通過多番查找資料，根據(jù)自己的理解，總結(jié)如下：

一、構(gòu)造函數(shù)：

構(gòu)造函數(shù)：通過new關(guān)鍵字可以用來創(chuàng)建特定類型的對象的函數(shù)。比如像Object和Array，兩者屬于內(nèi)置的原生的構(gòu)造函數(shù)，在運行時會自動的出現(xiàn)在執(zhí)行環(huán)境中，可以直接使用。如下：

var arr = new Array();//使用Array構(gòu)造函數(shù)創(chuàng)建了一個array實例arr arr[0]="a"; arr[1]="b"; alert(arr);//a,bvar obj=new Object();//使用Object構(gòu)造函數(shù)創(chuàng)建了一個Object實例obj obj.name="c"; obj.age=12; alert(obj.name);//c

我們可以自定義的創(chuàng)建構(gòu)造函數(shù)，并為其自定義屬性和方法，如：

//創(chuàng)建構(gòu)造函數(shù)Person function Person(name,age){this.name=name;this.age=age;this.sayName=function(){alert(this.name)// }; }//使用new關(guān)鍵字，來生成Person實例 var person1=new Person("Tom",22); var person2=new Person("Jerry",21); person1.sayName();//Tom person2.sayName();//Jerry

注意以下幾點：

• 構(gòu)造函數(shù)的名字始終要以大寫字母開頭（主要是為了區(qū)別于非構(gòu)造函數(shù)，也即是區(qū)別于普通函數(shù)）
• 構(gòu)造函數(shù)也就是函數(shù)，定義構(gòu)造函數(shù)和定義普通函數(shù)的語法一樣。構(gòu)造函數(shù)和普通函數(shù)的區(qū)別在于：使用他們的方式不同。任何函數(shù)只要使用new操作符來調(diào)用，那他就可以作為構(gòu)造函數(shù)；不使用new操作符來調(diào)用就是普通函數(shù)

function Person(name,age){this.name=name;this.age=age;this.sayName=function(){alert(this.name)// }; }//當做構(gòu)造函數(shù)使用 var person=new Person("Tom",22); person.sayName();//Tom //當做普通函數(shù)使用 Person("Jerry",30);//添加到window sayName();//Jerry 等同于window.sayName();

二、原型對象：

每個函數(shù)都有一個prototype屬性，它是一個指向原型對象的指針，原型對象在定義函數(shù)時同時被創(chuàng)建，原型對象的用途是包含所有實例共享的屬性和方法

function Person(){ } //自定義原型對象的屬性和方法 Person.prototype.name="Tom"; Person.prototype.age=25; Person.prototype.sayName=function(){alert(this.name); }; //原型對象中的所有屬性和方法 都會自動被所有實例所共享 var person1=new Person(); var person2=new Person(); person1.sayName();//Tom person2.sayName();//Tom

只要創(chuàng)建了一個新函數(shù)，每個函數(shù)在創(chuàng)建之后都會獲得一個prototype的屬性，這個屬性指向函數(shù)的原型對象（原型對象在定義函數(shù)時同時被創(chuàng)建），此原型對象又有一個名為“constructor”的屬性，反過來指向函數(shù)本身，達到一種循環(huán)指向，

如在上邊的例子中：alert(Person.prototype.constructor===Person);//會返回true

function Person(){} alert(Person.prototype.constructor===Person);//true

三、__proto__(注意這里proto左右兩邊都有兩個"_")

當調(diào)用構(gòu)造函數(shù)創(chuàng)建一個新實例后，該實例的內(nèi)部將包含一個指針[[Prototype]]，該指針指向創(chuàng)建它的構(gòu)造函數(shù)的原型，在腳本上沒有標準的方法來訪問[[Prototype]]，但大多數(shù)瀏覽器都支持通過__proto__來訪問。

function Person(){ } //自定義原型對象的屬性和方法 Person.prototype.name="Tom"; Person.prototype.age=25; Person.prototype.sayName=function(){alert(this.name); }; //原型對象中的所有屬性和方法 都會自動被所有實例所共享 var person1=new Person(); var person2=new Person(); person1.sayName();//Tom person2.sayName();//Tom alert(person1.__proto__===Person.prototype);//true

以上述的示例代碼為例，各個對象之間的關(guān)系如下圖所示：

?

總結(jié)：

①只要創(chuàng)建了一個函數(shù)，該函數(shù)的原型對象也隨之同時被創(chuàng)建出來，原型對象中的屬性和方法被經(jīng)由其相對應的構(gòu)造函數(shù)所創(chuàng)建的實例所共享

②每個函數(shù)在創(chuàng)建之后都會獲得一個prototype的屬性，這個屬性指向該函數(shù)的原型對象

③每個實例對象的__proto__屬性都指向其構(gòu)造函數(shù)的原型

?

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的JS中ptototype和__proto__的关系的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。