Javascript中prototype與__proto__的關係詳解

這篇文章主要給大家介紹了關於Javascript中prototype與__proto__的關係的相關資料，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。

前言

學到原型的時候感覺頭都大了/(ㄒoㄒ)/~~ 尤其是prototype和__proto__傻傻分不清  透過多番找資料，依照自己的理解，總結如下：

一、建構函數：

建構函數：透過new關鍵字可以用來建立特定類型的物件的函數。例如像Object和Array，兩者屬於內建的原生的建構函數，在執行時會自動的出現在執行環境中，可以直接使用。如下：

var arr = new Array();//使用Array构造函数创建了一个array实例arr
arr[0]="a";
arr[1]="b";
alert(arr);//a,b

var obj=new Object();//使用Object构造函数创建了一个Object实例obj
obj.name="c";
obj.age=12;
alert(obj.name);//c

我們可以自訂的建立建構函數，並為其自訂屬性和方法，如：

//创建构造函数Person
function Person(name,age){
 this.name=name;
 this.age=age;
 this.sayName=function(){
 alert(this.name)//
 };
}

//使用new关键字，来生成Person实例
var person1=new Person("Tom",22);
var person2=new Person("Jerry",21);
person1.sayName();//Tom
person2.sayName();//Jerry

注意以下幾點：

• 建構函數的名字總是要以大寫字母開頭（主要是為了區別於非建構函數，也即是區別於普通函數）

• 建構函數也就是函數，定義建構子和定義普通函數的語法一樣。構造函數和普通函數的區別在於：使用他們的方式不同。任何函數只要使用new運算元來調用，那他就可以當作建構子；不使用new運算子來呼叫就是普通函數

function Person(name,age){
 this.name=name;
 this.age=age;
 this.sayName=function(){
 alert(this.name)//
 };
}

//当做构造函数使用
var person=new Person("Tom",22);
person.sayName();//Tom 
//当做普通函数使用
Person("Jerry",30);//添加到window
sayName();//Jerry 等同于window.sayName();

二、原型物件：

每個函數都有一個prototype屬性，它是一個指向原型物件的指針，原型物件在定義函數時同時被創建，原型物件的用途是包含所有實例共享的屬性和方法

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

只要創建了一個新函數，每個函數在創建之後都會獲得一個prototype的屬性，這個屬性指向函數的原型物件（原型物件在定義函數時同時被創建） ，此原型物件又有一個名為「constructor」的屬性，反過來指向函數本身，達到一種循環指向，

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

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

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

當呼叫建構函式建立一個新實例後，該實例的內部將包含一個指標[[Prototype]]，該指標指向建立它的建構函式的原型，在腳本上沒有標準的方法來訪問[[Prototype]]，但大多數瀏覽器都支援透過__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

以上述的範例程式碼為例，各個物件之間的關係如下圖所示：

 

總結：

①只要創建了一個函數，該函數的原型物件也隨之同時被創建出來，原型物件中的屬性和方法被經由其相對應的建構函數所創建的實例所共享

②每個函數在創建之後都會獲得一個prototype的屬性，這個屬性指向該函數的原型對象

③每個對象的__proto__屬性都指向其構造函數的原型

上面是我整理給大家的，希望未來會對大家有幫助。

相關文章：

vue 多入口檔案建構vue多頁面所建構的實例講解

一種angular的方法級的緩存註解（裝飾器）

解決vue 路由變更頁面資料不刷新的問題

以上是Javascript中prototype與__proto__的關係詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！