javascript中定義類的方法詳解
JS中定義類的方式有很多種：
1、工廠方式
function Car(){
var ocar = new Object;
ocar.color = "blue";
ocar.doors = 4;
ocar.showColor = function(){
document.write(this.color)
};
return ocar;
}
var car1 = Car();
var car2 = Car();
調(diào)用此函數(shù)時將創(chuàng)建新對象，并賦予它所有的屬性和方法。使用此函數(shù)可以創(chuàng)建2個屬性完全相同的對象。當(dāng)然我妹可以通過給它傳遞參數(shù)來改版這種方式。
function Car(color,door){
var ocar = new Object;
ocar.color = color;
ocar.doors = door;
ocar.showColor = function(){
document.write(this.color)
};
return ocar;
}
var car1 = Car("red",4);
var car2 = Car("blue",4);
car1.showColor() //output:"red"
car2.showColor() //output:"blue"
現(xiàn)在可以通過給函數(shù)傳遞不同的參數(shù)來得到具有不同值的對象。
在前面的例子中，每次調(diào)用函數(shù)Car(),都要創(chuàng)建showcolor()，意味著每個對象都有一個自己的showcolor()方法。
但是事實上，每個對象斗共享了同一個函數(shù)。
雖然可以在函數(shù)外定義方法，然后通過將函數(shù)的屬性指向該方法。
function showColor(){
alert(this.color);
}
function Car(){
var ocar = new Object();
ocar.color = color;
ocar.doors = door;
ocar.showColor = showColor;
return ocar;
}
但是這樣看起來不像是函數(shù)的方法。
2、構(gòu)造函數(shù)方式
構(gòu)造函數(shù)方式同工廠方式一樣簡單，如下所示：
function Car(color,door){
this.color = color;
this.doors = door;
this.showColor = function(){
alert(this.color)
};
}
var car1 = new Car("red",4);
var car2 = new Car("blue",4);
可以看到構(gòu)造函數(shù)方式在函數(shù)內(nèi)部沒有創(chuàng)建對象，是用this關(guān)鍵字。因為在調(diào)用構(gòu)造函數(shù)時已經(jīng)創(chuàng)建了對象，而在函數(shù)內(nèi)部只能用this來訪問對象屬性。
現(xiàn)在用new來創(chuàng)建對象，看起來像那么回事了！但是它同工廠方式一樣。每次調(diào)用都會為對象創(chuàng)建自己的方法。
3、原型方式
該方式利用了對象的prototype屬性。首先用空函數(shù)創(chuàng)建類名，然后所有的屬性和方法都被賦予prototype屬性。
function Car(){
}
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.showColor = function(){
alert(this.color);
}
var car1 = new Car();
var car2 = new Car();
在這段代碼中，首先定義了一個空函數(shù)，然后通過prototype屬性來定義對象的屬性。調(diào)用該函數(shù)時，原型的所有屬性都會立即賦予要創(chuàng)建的對象，所有該函數(shù)的對象存放的都是指向showColor()的指針，語法上看起來都屬于同一個對象。
但是這個函數(shù)沒有參數(shù)，不能通過傳遞參數(shù)來初始化屬性，必須要在對象創(chuàng)建后才能改變屬性的默認(rèn)值。
原型方式有個很嚴(yán)重的問題就是當(dāng)屬性指向的是對象時，如數(shù)組。
function Car(){
}
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.arr = new Array("a","b");
Car.prototype.showColor = function(){
alert(this.color);
}
var car1 = new Car();
var car2 = new Car();
car1.arr.push("cc");
alert(car1.arr); //output:aa,bb,cc
alert(car2.arr); //output:aa,bb,cc
這里由于數(shù)組的引用值，Car的兩個對象指向的都是同一個數(shù)組，所以當(dāng)在car1添加值后，在car2中也可以看到。
聯(lián)合是用構(gòu)造函數(shù)/原型方式就可以像其他程序設(shè)計語言一樣創(chuàng)建對象，是用構(gòu)造函數(shù)定義對象的非函數(shù)屬性，用原型方式定義對象的方法。
function Car(color,door){
this.color = color;
this.doors = door;
this.arr = new Array("aa","bb");
}
Car.prototype.showColor(){
alert(this.color);
}
var car1 = new Car("red",4);
var car2 = new Car("blue",4);
car1.arr.push("cc");
alert(car1.arr); //output:aa,bb,cc
alert(car2.arr); //output:aa,bb
5、動態(tài)原型方式
動態(tài)原型的方式同混合的構(gòu)造函數(shù)/原型方式原理相似。唯一的區(qū)別就是賦予對象方法的位置。
function Car(color,door){
this.color = color;
this.doors = door;
this.arr = new Array("aa","bb");
if(typeof Car._initialized == "undefined"){
Car.prototype.showColor = function(){
alert(this.color);
};
Car._initialized = true;
}
}
動態(tài)原型方式是使用一個標(biāo)志來判斷是否已經(jīng)給原型賦予了方法。這樣可以保證該方法只創(chuàng)建一次
6、混合工廠方式
它的目的師創(chuàng)建假構(gòu)造函數(shù)，只返回另一種對象的新實例。
function Car(){
var ocar = new Object();
ocar.color = "red";
ocar.doors = 4;
ocar.showColor = function(){
alert(this.color)
};
return ocar;
}
與工廠方式所不同的是，這種方式使用new運(yùn)算符。
以上就是全部的創(chuàng)建對象方法。目前使用最廣泛的就是混合構(gòu)造函數(shù)/原型方式，此外，動態(tài)原型方式也很流行。在功能上與構(gòu)造函數(shù)/原型方式等價。
以上就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
JSChart輕量級圖形報表工具(內(nèi)置函數(shù)中文參考)
JSChart是一個輕量級的在線圖表生成工具，本身十分小巧，簡單易用，相對來講功能也不是特別強(qiáng)大，但是對于一些要求不高的應(yīng)用來講已經(jīng)夠用了，最近兩天在做一個監(jiān)控系統(tǒng)，想到了它。2010-10-10
這篇文章主要為大家詳細(xì)介紹了js仿京東輪播效果，選項卡里套選項卡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
G6?TreeGraph樹圖節(jié)點(diǎn)懶加載使用場景示例
這篇文章主要為大家介紹了G6?TreeGraph樹圖節(jié)點(diǎn)懶加載使用場景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
本文主要給大家講述了如何用JS和JQuery兩種方式實現(xiàn)雪花飄落的動畫效果，有需要的朋友收藏一下吧。2017-11-11
JavaScript實現(xiàn)的級聯(lián)算法示例【省市二級聯(lián)動功能】
這篇文章主要介紹了JavaScript實現(xiàn)的級聯(lián)算法,結(jié)合省市二級聯(lián)動下拉菜單功能實例分析了javascript事件響應(yīng)與元素動態(tài)操作實現(xiàn)級聯(lián)算法的相關(guān)技巧,需要的朋友可以參考下2018-12-12
將中文編入數(shù)組，調(diào)用數(shù)組的sort方法，再用到一個localeCompare即可實現(xiàn)中文排序,需要的朋友可以參考下2014-08-08
本篇文章主要介紹了詳解webpack提取第三方庫的正確姿勢，常用的提取第三方庫的方法有兩種，本文詳細(xì)的介紹了這兩種方法，有興趣的可以了解一下2017-12-12
在JavaScript的ES6版本中,引入了WeakMap和WeakSet這兩種新的數(shù)據(jù)結(jié)構(gòu),與Map和Set相比,它們有一些特殊的特點(diǎn)和用途,使它們在處理內(nèi)存泄漏問題、管理對象私有數(shù)據(jù)、處理對象的唯一性等場景中有顯著的優(yōu)勢,本文將深入探討WeakMap和WeakSet的特性和用途,一起看看吧2023-12-12
前端開發(fā)中,有時項目會遇到一些快捷鍵需求,比如綁定快捷鍵,展示快捷鍵,編輯快捷鍵等需求,所以本文就來用JavaScript手寫一個簡單的快捷鍵庫吧2024-02-02
ZeroClipboard.js使用一個flash復(fù)制多個文本框
這篇文章主要為大家詳細(xì)介紹了ZeroClipboard.js使用一個flash復(fù)制多個文本框，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06