1. 程式人生 > >揭祕Javascript中prototype與__proto__的關係

揭祕Javascript中prototype與__proto__的關係

prototype與 __ proto__ 都是在這個過程中催生的產物,我們一會兒馬上討論,在這之...做物件即可,那javascript種究竟是通過什麼來明確繼承關係的呢。

一、建構函式:

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

var arr = new Array();//使用Array建構函式建立了一個array例項arr
arr[0]="a";
arr[1]="b";
alert(arr);//a,b
//歡迎加入前端全棧開發交流圈一起學習交流:864305860
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)//
 };//歡迎加入前端全棧開發交流圈一起學習交流:864305860
}//面向1-3年前端人員
 //幫助突破技術瓶頸,提升思維能力
//當做建構函式使用
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);
};//歡迎加入前端全棧開發交流圈一起學習交流:864305860
//原型物件中的所有屬性和方法 都會自動被所有例項所共享
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);
};//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860
//原型物件中的所有屬性和方法 都會自動被所有例項所共享
var person1=new Person();
var person2=new Person();
person1.sayName();//Tom
person2.sayName();//Tom
alert(person1.__proto__===Person.prototype);//true

總結: ①只要建立了一個函式,該函式的原型物件也隨之同時被創建出來,原型物件中的屬性和方法被經由其相對應的建構函式所建立的例項所共享 ②每個函式在建立之後都會獲得一個prototype的屬性,這個屬性指向該函式的原型物件 ③每個物件的__proto__屬性都指向其建構函式的原型

結語

感謝您的觀看,如有不足之處,歡迎批評指正。