天天看點

JavaScript建立對象與原型

一、prototype原型

JavaScript 是一門面向對象語言,而面向對象的特點就是把一組事物的共性提取出來,組成一個對象,然後我們在為這個對象添加添加它特有的方法。

JavaScript 中任何事物都是對象,當我們建立一個函數時,每個函數都會自帶有很多屬性,其中一個是prototype屬性,這個屬性就是建立函數的執行個體對象。

JavaScript建立對象與原型

結果: Object

如上面的圖所示,Persion.prototype在控制台輸出的是個執行個體化好的對象,這就說明 我們在建立函數的時候,它内部自動為他執行個體化了一個對象,并指派給prototype屬性,背景建立函數的時候進行了以下操作:

  var temp = new Persion();

Persion.prototype = temp;

是以也就就是說 如果我們在Persion.prototype下自定義方法和屬性,那麼這些方法和屬性就是共享有的。

二、對象建立

下面是在JavaScript 中建立對象的幾種方式:

1.工廠方式

在函數中定義對象,并定義對象的屬性和方法,最後把建立好的對象傳回出去,

這就是工廠方式。

JavaScript建立對象與原型

2.構造函數方式

構造函數模式建立對象,是使用new 來建立對象,比較好了解,而且用了this來指向屬性和方法,比較靈活,但是我們大多數時候建立對象的時候,屬性都是會變的,而方法是不變的,所有建立兩次完全的相同方法沒有必要。

JavaScript建立對象與原型

3.原型方式

使用原型對象可以讓所有對象執行個體共享它所包含的屬性及方法,由于共享,是以是以一個執行個體修改了資料,另一個也随之更改了資料。

JavaScript建立對象與原型

   4.混合模式(原型模式 + 構造函數模式)

混合模式中構造函數模式用于定義執行個體屬性,而原型模式用于定義方法和共享屬性。

這是開發中最常用的建立對象方式。

JavaScript建立對象與原型

  5.動态原型模式

動态原型模式将所有資訊封裝在了構造函數中,而通過構造函數中初始化原型(僅第一個對象執行個體化時初始化原型),這個可以通過判斷該方法是否存在,而選擇是否需要初始化。

JavaScript建立對象與原型

三、原型鍊

在JavaScript 中建立對象,都有一個__proto__内置屬性,他是建立對象後存在的,這個屬性主要的作用就是繼承概念,在JavaScript中所有的對象的基類都是Object,當我們建立一個對象的時候,新建立對象的prototype 屬性已經沒有了,取而代之的是__proto__,然而新對象的__proto__屬性與之前對象的prototype屬性進行==比較是相等的。

JavaScript建立對象與原型

結果:true

   由此可見在對象初始化的時候,Persion.prototype指派給了temp.__proto__,也就是說temp有Persion.prototype下定義的所有方法和屬性.

這就是一個通過__proto__屬性實作的一個繼承,下面是一個繼承的尋找圖

JavaScript建立對象與原型

當對象調用方法或屬性的時候,都會先查找自己有沒有,如果有就不會再想上查找,如果沒有找到,就會通過__proto__屬性想上一層一層的尋找,直到Object下,如果沒有就會報null,這就是繼承的原理,子類繼承父類所有方法和屬性。

繼續閱讀