詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對象(1)
這一次我們深入的學習一下JavaScript面向?qū)ο蠹夹g(shù),在學習之前,必要的說明一下一些面向?qū)ο蟮囊恍┬g(shù)語。這也是所有面對對象語言所擁有的共同點。有這樣幾個面向?qū)ο笮g(shù)語:
一、對象
ECMA-262把對象(object)定義為“屬性的無序集合,每個屬性存放一個原始值、對象或函數(shù)”。嚴格來說,這意味著對象是無特定順序的值的數(shù)組。盡管ECMAScript如此定義對象,但它更通用的定義是基于代碼的名詞(人、地點或事物)的表示。
二、類
每個對象都由類定義,可以把類看做對象的配方。類不僅要定義對象的接口(interface)(開發(fā)者訪問的屬性和方法),還要定義對象的內(nèi)部工作(使屬性和方法發(fā)揮作用的代碼)。編譯器和解釋程序都根據(jù)類的說明構(gòu)建對象。
三、實例
程序使用類創(chuàng)建對象時,生成的對象叫作類的實例(instance)。對類生成的對象的個數(shù)的唯一限制來自于運行代碼的機器的物理內(nèi)存。每個實例的行為相同,但實例處理一組獨立的數(shù)據(jù)。由類創(chuàng)建對象實例的過程叫做實例化(instantiation)。
在前面的章節(jié)我們提到過,ECMAScript并沒有正式的類。相反,ECMA-262把對象定義描述為對象的配方。這是 ECMAScript邏輯上的一種折中方案,因為對象定義實際上是對象自身。即使類并不真正存在,我們也把對象定義叫做類,因為大多數(shù)開發(fā)者對此術(shù)語更熟悉,而且從功能上說,兩者是等價的。
使用預定義對象只是面向?qū)ο笳Z言的能力的一部分,它真正強大之處在于能夠創(chuàng)建自己專用的對象。ECMAScript 擁有很多創(chuàng)建對象的方法。
1、原始方式
因為對象的屬性可以在對象創(chuàng)建后動態(tài)定義,所有許多開發(fā)者都在JavaScript 最初引入時編寫類似下面的代碼:
var Car = new Object();
Car.color = "blue";
Car.doors = 4;
Car.mpg = 25;
Car.showColor = function() {
return this.color;
};
document.write(Car.showColor());//輸出:blue
在上面的代碼中,創(chuàng)建對象Car。然后給它設(shè)置幾個屬性:它的顏色是藍色,有四個門,每加侖油可以跑 25 英里。最后一個屬性實際上是指向函數(shù)的指針,意味著該屬性是個方法。執(zhí)行這段代碼后,就可以使用對象Car。不過這里有一個問題,就是可能需要創(chuàng)建多個Car的實例,這樣就造成了我們會重復許多類似的代碼,這樣會很麻煩。
2、工廠方式
要解上述的多個類似對象聲明的問題,開發(fā)者創(chuàng)造了能創(chuàng)建并返回特定類型的對象的工廠方式。這種方式就是為了解決實例化對象產(chǎn)生大量重復的問題。
(1)無參數(shù)的工廠方式
例如,函數(shù)createCar()可用于封裝前面列出的創(chuàng)建Car對象的操作:
function createCar() {
var TempCar = new Object();
TempCar.color = "blue";
TempCar.doors = 4;
TempCar.mpg = 25;
TempCar.showColor = function() {
return this.color;
};
return TempCar;
};
var Car1 = createCar();
var Car2 = createCar();
document.write(Car1.showColor()+"<br/>");//輸出:blue
document.write(Car2.showColor());//輸出:blue
在這里,第一個例子中的所有代碼都包含在createCar()函數(shù)中。此外,還有一行額外的代碼,返回TempCar 對象作為函數(shù)值。調(diào)用此函數(shù),將創(chuàng)建新對象,并賦予它所有必要的屬性,復制出一個我們在前面說明過的Car對象。因此,通過這種方法,我們可以很容易地創(chuàng)建Car對象的兩個版本(Car1和 Car2),它們的屬性完全一樣。
(2)有參數(shù)的工廠方式
我們還可以修改createCar()函數(shù),給它傳遞各個屬性的默認值,而不是簡單地賦予屬性默認值:
function createCar(Color,Doors,Mpg) {
var TempCar = new Object();
TempCar.color = Color;
TempCar.doors = Doors;
TempCar.mpg = Mpg;
TempCar.showColor = function() {
return this.color;
};
return TempCar;
};
var Car1 = createCar("red",4,23);
var Car2 = createCar("blue",3,25);
document.write(Car1.showColor()+"<br/>");//輸出:red
document.write(Car2.showColor());//輸出:blue
給createCar()函數(shù)加上參數(shù),即可為要創(chuàng)建的Car對象的color、doors 和mpg屬性賦值。這使兩個對象具有相同的屬性,卻有不同的屬性值。
工廠方式解決了重復實例化的問題,但是還是有一個問題,那就是前面的例子中,每次調(diào)用函數(shù)createCar(),都要創(chuàng)建新函數(shù)showColor(),意味著每個對象都有自己的 showColor() 版本。而事實上,每個對象都共享同一個函數(shù)。有些開發(fā)者在工廠函數(shù)外定義對象的方法,然后通過屬性指向該方法,從而避免這個問題:
function showColor() {
return this.color;
};
function createCar(Color,Doors,Mpg) {
var TempCar = new Object();
TempCar.color = Color;
TempCar.doors = Doors;
TempCar.mpg = Mpg;
TempCar.showColor = showColor;
return TempCar;
};
var Car1 = createCar("red",4,23);
var Car2 = createCar("blue",3,25);
document.write(Car1.showColor()+"<br/>");//輸出:red
document.write(Car2.showColor());//輸出:blue
在上面這段重寫的代碼中,在函數(shù) createCar()之前定義了函數(shù) showColor()。在createCar()內(nèi)部,賦予對象一個指向已經(jīng)存在的 showColor() 函數(shù)的指針。從功能上講,這樣解決了重復創(chuàng)建函數(shù)對象的問題;但是從語義上講,該函數(shù)不太像是對象的方法。所有這些問題都引發(fā)了開發(fā)者定義的構(gòu)造函數(shù)的出現(xiàn)。
3、構(gòu)造函數(shù)方式
創(chuàng)建構(gòu)造函數(shù)就像創(chuàng)建工廠方式的函數(shù)一樣容易。第一步選擇構(gòu)造函數(shù)的名字。根據(jù)慣例,這個名字的首字母大寫,以使它與首字母通常是小寫的變量名分開。除了這點不同,構(gòu)造函數(shù)看起來很像工廠方式的函數(shù)。請看下面的例子:
function Car(Color,Doors,Mpg) {
this.color = Color;
this.doors = Doors;
this.mpg = Mpg;
this.showColor = function() {
return this.color;
};
};
var Car1 = new Car("red",4,23);
var Car2 = new Car("blue",3,25);
document.write(Car1.showColor()+"<br/>");//輸出:red
document.write(Car2.showColor());//輸出:blue
下面為您解釋上面的代碼與工廠方式的差別。首先在構(gòu)造函數(shù)內(nèi)沒有創(chuàng)建對象,而是使用this關(guān)鍵字。使用new運算符構(gòu)造函數(shù)時,在執(zhí)行第一行代碼前先創(chuàng)建一個對象,只有用this才能訪問該對象。然后可以直接賦予this屬性,默認情況下是構(gòu)造函數(shù)的返回值(不必明確使用 return 運算符)。現(xiàn)在,用new運算符和對象名Car創(chuàng)建對象,就更像 ECMAScript 中一般對象的創(chuàng)建方式了。
就像工廠方式的函數(shù),構(gòu)造函數(shù)會重復生成函數(shù),為每個對象都創(chuàng)建獨立的函數(shù)版本。不過,與工廠方式的函數(shù)相似,也可以用外部函數(shù)重寫構(gòu)造函數(shù),同樣地,這么做語義上無任何意義。這正是下面要講的原型方式的優(yōu)勢所在。在下篇文章中會詳細的分析面向?qū)ο蟮脑头绞揭约捌渌C合的方式。
以上就是本文的全部內(nèi)容,希望對大家的學習javascript程序設(shè)計有所幫助。
- js面向?qū)ο笾R妱?chuàng)建對象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式)
- 從面試題學習Javascript 面向?qū)ο螅▌?chuàng)建對象)
- js面向?qū)ο?多種創(chuàng)建對象方法小結(jié)
- 學習javascript面向?qū)ο?掌握創(chuàng)建對象的9種方式
- 詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對象(2)
- JavaScript面向?qū)ο蟪绦蛟O(shè)計創(chuàng)建對象的方法分析
- JavaScript 三種創(chuàng)建對象的方法
- JS 創(chuàng)建對象(常見的幾種方法)
- js創(chuàng)建對象的幾種常用方式小結(jié)(推薦)
- javascript面向?qū)ο髣?chuàng)建對象的方式小結(jié)
相關(guān)文章
JavaScript eval()函數(shù)定義及使用方法詳解
這篇文章主要介紹了JavaScript eval()函數(shù)定義及使用方法詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
點擊button獲取text內(nèi)容并改變樣式的js實現(xiàn)
這篇文章主要介紹了點擊button獲取text內(nèi)容并改變樣式的js實現(xiàn),經(jīng)測試非常實用,需要的朋友可以參考下2014-09-09
基于JavaScript實現(xiàn)生成名片、鏈接等二維碼
本文使用javascript技術(shù)實現(xiàn)生成名片、鏈接等二維碼的代碼,代碼簡單易懂并附有注釋,需要的朋友可以參考下本文2015-09-09
filters.revealTrans.Transition使用方法小結(jié)
有看到幻燈片調(diào)用會用到divid.filters.revealTrans.Transition=Math.floor(Math.random()*23)和divid.filters.revealTrans.apply(),那么這兩個都是什么意思呢?2010-08-08
JavaScript實現(xiàn)點擊復制功能具體代碼(JS訪問剪貼板相關(guān))
這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)點擊復制功能(JS訪問剪貼板相關(guān))的相關(guān)資料,復制功能指的是將一個文本或者圖片等資源從一個位置通過復制的方式再次拷貝到另一個位置,需要的朋友可以參考下2023-10-10

