1. 程式人生 > >JS定義類或函數

JS定義類或函數

我們 strong instance 關鍵字 工廠模式 定義 nbsp call 引用

1、工廠模式
<script>
function createCar(){
var oCar = new Object();
oCar.color="red";
oCar.doors=4;
oCar.showColor=function(){
alert(this.color);
}
return oCar;
}

//調用
var oCar1 = createCar();
var oCar2 = createCar();
oCar1.color = "black";
oCar1.showColor();
oCar2.showColor();
</script>
使用new關鍵字已經深入人心,因此我們使用上面的方法去定義總感覺別扭,

並且每次調用時都去創建新的屬性以及函數,功能上也不實際。
下來我們看看構造函數的形式定義類。

2、構造函數
<script>
function Car(color,doors){
this.color = color;
this.doors = doors;
this.showColor = function(){
alert(this.color);
}
}

//調用
var car1 = new Car("red",4);
var car2 = new Car("blue",4);
car1.showColor();
car2.showColor();
</script>

每次new 對象時都會創建所有的屬性,包括函數的創建,也就是說多個對象完全獨立,
我們定義類的目的就是為了共享方法以及數據,但是car1對象與car2對象都是各自獨立的屬性與函數,
最起碼我們應該共享方法。這就是原型方式的優勢所在。

3、原型方式
<script>
function Car(){}
Car.prototype.color="red";
Car.prototype.doors=4;
Car.prototype.drivers = new Array("Tom","Jerry");
Car.prototype.showColor=function(){
alert(this.color);

}

//調用
var car1 = new Car();
var car2 = new Car();
call.showColor();
car2.showColor();
alert(car1.drivers);
car1.drivers.push("stephen");
alert(car1.drivers); //結果:Tom,Jerry,stephen
alert(car2.drivers); //結果:Tom,Jerry,stephen
//可以用json方式簡化prototype的定義:
Car.prototype =
{
color: "red",
doors: 4,
drivers: ["Tom", "Jerry",‘safdad‘],
showColor: function() {
alert(this.color);
}
</script>
首先這段代碼的構造函數,其中沒有任何代碼,接下來通過對象的prototype屬性添加屬性定義Car對象的屬性。
這種方法很好,但是問題是Car的對象指向的Array指針,Car的兩個對象都指向同一個Array數組,
其中一個對象car1改變屬性對象的引用(數組Array)時,另一個對象car2也同時改變,這是不允許的。
同時該問題也表現在原型不能帶任何初始化參數,導致構造函數無法正常初始化。
這需要另一種方式來解決:那就是混合的構造函數/原型模式。

4、混合的構造函數、原型模式
<script>
function Car(color,doors){
this.color = color;
this.doors = doors;
this.drivers=new Array("Tom","Jerry");
}
Car.prototype.showColor=function(){
alert(this.color);
}
//調用
var car1 = new Car(‘red‘,4);
var car2 = new Car(‘blue‘,4);
car1.showColor();
car2.showColor();
alert(car1.drivers);
car1.drivers.push("stephen");
alert(car1.drivers); //結果:Tom,Jerry,stephen
alert(car2.drivers); //結果:Tom,Jerry
alert(car1 instanceof Car);
</script>

JS定義類或函數