JS定義類的六種方式詳解

2022-03-17 08:51:29 字數 4280 閱讀 4406

1、工廠方式?1

2345

6789

1011

functioncar();

returnocar;

}

varcar1 = car();

varcar2 = car();

呼叫此函式時將建立新物件,並賦予它所有的屬性和方法。使用此函式可以建立2個屬性完全相同的物件。

當然可以通過給它傳遞引數來改版這種方式。?1

2345

6789

1011

1213

functioncar(color,door);

returnocar;

}

varcar1 = car(「red」,4);

varcar2 = car(「blue」,4);

car1.showcolor()//output:」red」

car2.showcolor()//output:」blue」

現在可以通過給函式傳遞不同的引數來得到具有不同值的物件。

在前面的例子中,每次呼叫函式car(),都要建立showcolor(),意味著每個物件都有乙個自己的showcolor()方法。

但是事實上,每個物件鬥共享了同乙個函式。 雖然可以在函式外定義方法,然後通過將函式的屬性指向該方法。?1

2345

6789

1011

functionshowcolor()

functioncar()

但是這樣看起來不像是函式的方法。

2、建構函式方式

建構函式方式同工廠方式一樣簡單,如下所示:?1

2345

6789

functioncar(color,door);

}

varcar1 =newcar(「red」,4);

varcar2 =newcar(「blue」,4);

可以看到建構函式方式在函式內部沒有建立物件,是用this關鍵字。因為在呼叫建構函式時已經建立了物件,而在函式內部只能用this來訪問物件屬性。

現在用new來建立物件,看起來像那麼回事了!但是它同工廠方式一樣。每次呼叫都會為物件建立自己的方法。

3、原型方式

該方式利用了物件的prototype屬性。首先用空函式建立類名,然後所有的屬性和方法都被賦予prototype屬性。?1

2345

6789

functioncar()

car.prototype.color = 「red」;

car.prototype.doors = 4;

car.prototype.showcolor =function()

varcar1 =newcar();

varcar2 =newcar();

在這段**中,首先定義了乙個空函式,然後通過prototype屬性來定義物件的屬性。呼叫該函式時,原型的所有屬性都會立即賦予要建立的物件,所有該函式的物件存放的都是指向showcolor()的指標,語法上看起來都屬於同乙個物件。

但是這個函式沒有引數,不能通過傳遞引數來初始化屬性,必須要在物件建立後才能改變屬性的預設值。

原型方式有個很嚴重的問題就是當屬性指向的是物件時,如陣列。?1

2345

6789

1011

1213

functioncar()

car.prototype.color = 「red」;

car.prototype.doors = 4;

car.prototype.arr =newarray(「a」,」b」);

car.prototype.showcolor =function()

varcar1 =newcar();

varcar2 =newcar();

car1.arr.push(「cc」);

alert(car1.arr);//output:aa,bb,cc

alert(car2.arr);//output:aa,bb,cc

這裡由於陣列的引用值,car的兩個物件指向的都是同乙個陣列,所以當在car1新增值後,在car2中也可以看到。

聯合是用建構函式/原型方式就可以像其他程式語言一樣建立物件,是用建構函式定義物件的非函式屬性,用原型方式定義物件的方法。?1

2345

6789

1011

1213

functioncar(color,door)

car.prototype.showcolor()

varcar1 =newcar(「red」,4);

varcar2 =newcar(「blue」,4);

car1.arr.push(「cc」);

alert(car1.arr);//output:aa,bb,cc

alert(car2.arr);//output:aa,bb

5、動態原型方式

動態原型的方式同混合的建構函式/原型方式原理相似。唯一的區別就是賦予物件方法的位置。?1

2345

6789

1011

functioncar(color,door);

car._initialized =true;

}

}

動態原型方式是使用乙個標誌來判斷是否已經給原型賦予了方法。這樣可以保證該方法只建立一次

6、混合工廠方式

它的目的師建立假建構函式,只返回另一種物件的新例項。?1

2345

6789

functioncar();

returnocar;

}

與工廠方式所不同的是,這種方式使用new運算子。

以上就是全部的建立物件方法。目前使用最廣泛的就是混合建構函式/原型方式,此外,動態原型方式也很流行。在功能上與建構函式/原型方式等價。

js實現繼承的六種方式

原型鏈利用原型讓乙個引用型別繼承另外乙個引用型別的屬性和方法。建構函式,原型,例項之間的關係 每個建構函式都有乙個原型物件,原型物件包含乙個指向建構函式的指標,而例項都包含乙個指向原型物件的內部指標。原型鏈實現繼承例子 function supertype supertype.prototype.g...

js 實現繼承的六種方式

原型鏈 利用原型讓乙個引用型別繼承另外乙個引用型別的屬性和方法。建構函式,原型,例項之間的關係 每個建構函式都有乙個原型物件,原型物件包含乙個指向建構函式的指標,而例項都包含乙個指向原型物件的內部指標。原型鏈實現繼承例子 function supertype supertype.prototype....

JS建立物件的六種方式

表現方式 代表對映 代表賦值 var x age var obj newobject obj.name show obj.x 18 字串 obj x 40 變數 console.log obj var x hooby var obj obj.man obj x dance obj.say funct...