欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS定義類的六種方式詳解

 更新時間:2016年05月12日 16:32:09   投稿:jingxian  
下面小編就為大家?guī)硪黄狫S定義類的六種方式詳解。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考,一起跟隨小編過來看看吧,祝大家游戲愉快哦

在前端開發(fā)中,經(jīng)常需要定義JS類。那么在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運算符。

以上就是全部的創(chuàng)建對象方法。目前使用最廣泛的就是混合構(gòu)造函數(shù)/原型方式,此外,動態(tài)原型方式也很流行。在功能上與構(gòu)造函數(shù)/原型方式等價。

以上這篇JS定義類的六種方式詳解就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 詳解JS對象封裝的常用方式

    詳解JS對象封裝的常用方式

    JS是一門面向?qū)ο笳Z言,其對象是用prototype屬性來模擬的,本文介紹了如何封裝JS對象,具有一定的參考價值,下面跟著小編一起來看下吧
    2016-12-12
  • 微信小程序控制view隱藏顯示的5種方法匯總

    微信小程序控制view隱藏顯示的5種方法匯總

    在微信小程序開發(fā)時,經(jīng)常要用到一個控件會根據(jù)不同的情況和環(huán)境動態(tài)顯示與隱藏這種情況,下面這篇文章主要給大家介紹了關(guān)于微信小程序控制view隱藏顯示的5種方法,需要的朋友可以參考下
    2022-04-04
  • JavaScript中對象屬性描述符的使用詳解

    JavaScript中對象屬性描述符的使用詳解

    屬性描述符是 ECMAScript 5 新增的語法,它其實就是一個內(nèi)部對象,用來描述對象的屬性的特性,下面小編就來為大家詳細(xì)介紹一下js中對象屬性描述符的使用,需要的可以參考下
    2023-11-11
  • AJAX異步從優(yōu)酷專輯中采集所有視頻及信息(JavaScript代碼)

    AJAX異步從優(yōu)酷專輯中采集所有視頻及信息(JavaScript代碼)

    上次寫了一個 .NET從優(yōu)酷專輯中采集所有視頻及信息(VB.NET代碼)
    2010-11-11
  • JS異步編程之generator與async/await語法糖詳解

    JS異步編程之generator與async/await語法糖詳解

    這篇文章主要為大家詳細(xì)介紹了JS異步編程中g(shù)enerator與async/await語法糖的使用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以學(xué)習(xí)一下
    2022-11-11
  • indexOf 和 lastIndexOf 使用示例介紹

    indexOf 和 lastIndexOf 使用示例介紹

    indexOf是在一個字符串中尋找一個字的位置,lastIndexOf 也是找字 , 它們倆的區(qū)別是前者從字符串頭開始找,后者是從字符串末端開始找
    2014-09-09
  • JS實現(xiàn)簡易的圖片拖拽排序?qū)嵗a

    JS實現(xiàn)簡易的圖片拖拽排序?qū)嵗a

    這篇文章主要介紹了JS實現(xiàn)簡易的圖片拖拽排序?qū)嵗a,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • 讓微信小程序支持ES6中Promise特性的方法詳解

    讓微信小程序支持ES6中Promise特性的方法詳解

    微信更新自家的Web開發(fā)工具后無法使用原生 Promise,下面這篇教程教你引入第三方庫來使用 Promise,文中通過圖文介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
    2017-06-06
  • javascript的currying函數(shù)介紹

    javascript的currying函數(shù)介紹

    curring的概念將函數(shù)式編程的概念和默認(rèn)參數(shù)以及可變參數(shù)結(jié)合在一起.一個帶n個參數(shù),curried的函數(shù)固化第一個參數(shù)為固定參數(shù),并返回另一個帶n-1個參數(shù)的函數(shù)對象,分別類似于LISP的原始函數(shù)car和cdr的行為。currying能泛化為偏函數(shù)應(yīng)用(partial function application, PFA),p 這種函數(shù)將任意數(shù)量(順序)的參數(shù)的函數(shù)轉(zhuǎn)化為另一個帶剩余參數(shù)的函數(shù)對象
    2012-02-02
  • 將rmb數(shù)字位錢數(shù)轉(zhuǎn)化為中文錢數(shù)的js函數(shù)

    將rmb數(shù)字位錢數(shù)轉(zhuǎn)化為中文錢數(shù)的js函數(shù)

    用力將用戶輸入的錢數(shù),中文化輸出的函數(shù)代碼,需要的朋友可以參考下。
    2010-07-07

最新評論