JavaScript中的面向?qū)ο缶幊痰脑敿?xì)介紹

介紹

JavaScript 是一個(gè)強(qiáng)大的面向?qū)ο缶幊陶Z(yǔ)言，但是，并不像傳統(tǒng)的編程語(yǔ)言，它采用一個(gè)以原型為基礎(chǔ)的OOP模型，致使它的語(yǔ)法讓大多數(shù)開(kāi)發(fā)人員看不懂。另外，JavaScript 也把函數(shù)作為首要的對(duì)象，這可能會(huì)給不夠熟悉這門語(yǔ)言的開(kāi)發(fā)人員造成更大的困惑。那就是我們決定放在前面作為一個(gè)簡(jiǎn)短前言進(jìn)行介紹的原因，并且在 JavaScript 里也可以用作面向?qū)ο缶幊痰囊粋€(gè)參考。

這個(gè)文檔沒(méi)有提供一個(gè)面向?qū)ο缶幊痰囊?guī)則預(yù)覽，但有它們的接口概述。

命名空間

隨著越來(lái)越多的第三方庫(kù)，框架和web依賴的出現(xiàn)，JavaScript發(fā)展中的命名空間是勢(shì)在必行的，我們得盡量避免在全局命名空間的對(duì)象和變量的沖突。

不幸的是，JavaScript沒(méi)有提供支持命名空間的編譯，但是我們可以使用對(duì)象來(lái)得到同樣結(jié)果。在JavaScript中我們有許多種模式來(lái)實(shí)現(xiàn)命名空間接口，但是我們覆蓋嵌套的命名空間，它在該領(lǐng)域是最常用的模式。

嵌套命名空間

嵌套的命名空間模式使用對(duì)象字面量來(lái)捆綁一個(gè)特定應(yīng)用的特定名字的功能。

我們最初創(chuàng)建一個(gè)全局對(duì)象，并且賦值給一個(gè)稱為MyApp的變量。

// global namespace
var MyApp = MyApp || {};

上述的語(yǔ)法會(huì)檢查MyApp是否已經(jīng)被定義過(guò)。假如它已經(jīng)被定義過(guò)，我們簡(jiǎn)單地把它賦值給自己，但是，我們創(chuàng)建一個(gè)空的容器來(lái)裝載我們的函數(shù)和變量。

我們也可以使用相同技術(shù)來(lái)創(chuàng)建子命名空間。例如：

// sub namespaces
MyApp.users = MyApp.user || {};

我們一旦啟動(dòng)我們的容器，我們可以在（容器）內(nèi)部定義我們的函數(shù)和變量，并且在全局命名空間調(diào)用它們，不需要冒著與現(xiàn)有定義沖突的風(fēng)險(xiǎn)。

// declarations

MyApp.users = {

	existingUsers: '', // variable in namespace

	renderUsersHTML: function() { // function in namespace

	// render html list of users

	}

};

// syntax for using functions within our namespace from the global scope

MyApp.users.renderUsersHTML();

在JavaScript命名模式的一個(gè)內(nèi)部概述是由Goggle的Addy Osmani在Essential JavaScript Namespacing Patterns的文章中介紹的。假如你想探索不同的模式，這里將是一個(gè)美好的起點(diǎn)。

對(duì)象

如果你寫(xiě)過(guò) JavaScript 代碼，那你已經(jīng)使用過(guò)對(duì)象了。JavaScript 有三種類型的對(duì)象：

原生對(duì)象

原生對(duì)象是語(yǔ)言規(guī)范的一部分，不管在什么樣的運(yùn)行環(huán)境下運(yùn)行，原生對(duì)象都可用。原生對(duì)象包括：Array、Date、Math 和 parseInt 等。想了解所有原生對(duì)象，請(qǐng)參閱 JavaScript 內(nèi)建對(duì)象參考

var cars = Array(); // Array is a native object

宿主對(duì)象

與原生對(duì)象不同，宿主對(duì)象是由 JavaScript 代碼運(yùn)行的環(huán)境創(chuàng)建。不同的環(huán)境環(huán)境創(chuàng)建有不同的宿主對(duì)象。這些宿主對(duì)象在多數(shù)情況下都允許我們與之交互。如果我們寫(xiě)的是在瀏覽器（這是其中一種運(yùn)行環(huán)境）上運(yùn)行的代碼，會(huì)有 window、document、location 和 history 等宿主對(duì)象。

document.body.innerHTML = 'Hello World!'; // document is a host object

// the document object will not be available in a 
// stand-alone environments such as Node.js

用戶對(duì)象

用戶對(duì)象（或植入對(duì)象）是在我們的代碼中定義的對(duì)象，在運(yùn)行的過(guò)程中創(chuàng)建。JavaScript 中有兩種方式創(chuàng)建自己的對(duì)象，下面詳述。

對(duì)象字面量

在前面演示創(chuàng)建命名空間的時(shí)候，我們已經(jīng)接觸到了對(duì)象字面量。現(xiàn)在來(lái)搞清楚對(duì)象字面量的定義：對(duì)象字面量是置于一對(duì)花括號(hào)中的，由逗號(hào)分隔的名-值對(duì)列表。對(duì)象字面量可擁有變量（屬性）和函數(shù)（方法）。像 JavaScript 中的其它對(duì)象一樣，它也可以作為函數(shù)的參數(shù)，或者返回值。

現(xiàn)在定義一個(gè)對(duì)象字面量并賦予一個(gè)變量：

// declaring an object literal

var dog = {

	// object literal definition comes here...

};

向這個(gè)對(duì)象字面量添加屬性和方法，然后在全局作用域訪問(wèn)：

// declaring an object literal

var dog = {

	breed: 'Bulldog', // object literal property

	bark: function() { // object literal method

	console.log("Woof!");

	},

};

// using the object

console.log( dog.breed ); // output Bulldog

dog.bark(); // output Woof!

這看起來(lái)和前面的命名空間很像，但這并不是巧合。字面量對(duì)象最典型的用法就是把代碼封裝起來(lái)，使之在一個(gè)封裝的包中，以避免與全局作用域中的變量或?qū)ο蟀l(fā)生沖突。由于類似的原因，它也常常用于向插件或?qū)ο髠鬟f配置參數(shù)。

如果你熟悉設(shè)計(jì)模式的話，對(duì)象字面量在某種程度上來(lái)說(shuō)就是單例，就是那種只有一個(gè)實(shí)例的模式。對(duì)象字面量先天不具備實(shí)例化和繼承的能力，我們接下來(lái)還得了解 JavaScript 中另一種創(chuàng)建自定義對(duì)象的方法。

構(gòu)造函數(shù)

定義構(gòu)造函數(shù)

函數(shù)是 JavaScript 一等公民，就是說(shuō)其它實(shí)體支持的操作函數(shù)都支持。在 JavaScript 的世界，函數(shù)可以在運(yùn)行時(shí)進(jìn)行動(dòng)態(tài)構(gòu)造，可以作為參數(shù)，也可以作為其它函數(shù)的返回值，也可被賦予變量。而且，函數(shù)也可以擁有自己的屬性和方法。JavaScript 中函數(shù)的特性使之成為可以實(shí)體化和繼承的東西。

來(lái)看看怎么用構(gòu)造函數(shù)創(chuàng)建一個(gè)自定義的對(duì)象:

// creating a function

function Person( name, email ) {

	// declaring properties and methods using the (this) keyword

	this.name 	= name;
	this.email 	= email;

	this.sayHey = function() {

	console.log( "Hey, I’m " + this.name );

	};

}

// instantiating an object using the (new) keyword

var steve = new Person( "Steve", "steve@hotmail.com" );

// accessing methods and properties

steve.sayHey();

創(chuàng)建構(gòu)造函數(shù)類似于創(chuàng)建普通函數(shù)，只有一點(diǎn)例外：用 this 關(guān)鍵字定義自發(fā)性和方法。一旦函數(shù)被創(chuàng)建，就可以用 new 關(guān)鍵字來(lái)生成實(shí)例并賦予變量。每次使用 new 關(guān)鍵字，this 都指向一個(gè)新的實(shí)例。

構(gòu)建函數(shù)實(shí)例化和傳統(tǒng)面向?qū)ο缶幊陶Z(yǔ)言中的通過(guò)類實(shí)例化并非完全不同，但是，這里存在一個(gè)可能不易被察覺(jué)的問(wèn)題。

當(dāng)使用 new 關(guān)鍵字創(chuàng)建新對(duì)象的時(shí)候，函數(shù)塊會(huì)被反復(fù)執(zhí)行，這使得每次運(yùn)行都會(huì)產(chǎn)生新的匿名函數(shù)來(lái)定義方法。這就像創(chuàng)建新的對(duì)象一樣，會(huì)導(dǎo)致程序消耗更多內(nèi)存。這個(gè)問(wèn)題在現(xiàn)代瀏覽器上運(yùn)行的程序中并不顯眼。但隨著應(yīng)用規(guī)則地?cái)U(kuò)大，在舊一點(diǎn)的瀏覽器、計(jì)算機(jī)或者低電耗設(shè)備中就會(huì)出現(xiàn)性能問(wèn)題。不過(guò)不用擔(dān)心，有更好的辦法將方法附加給構(gòu)造函數(shù)（是不會(huì)污染全局環(huán)境的哦）。

方法和原型

前面介紹中提到 JavaScript 是一種基于原型的編程語(yǔ)言。在 JavaScript 中，可以把原型當(dāng)作對(duì)象模板一樣來(lái)使用。原型能避免在實(shí)例化對(duì)象時(shí)創(chuàng)建多余的匿名函數(shù)和變量。

在 JavaScript 中，prototype 是一個(gè)非常特別的屬性，可以讓我們?yōu)閷?duì)象添加新的屬性和方法?，F(xiàn)在用原型重寫(xiě)上面的示例看看：

// creating a function

function Person( name, email ) {

	// declaring properties and methods using the (this) keyword

	this.name 	= name;
	this.email 	= email;

}

// assign a new method to the object’s prototype

Person.prototype.sayHey = function() {

	console.log( "Hey, I’m " + this.name );

}

// instantiating a new object using the constructor function

var steve = new Person( "Steve", "steve@hotmail.com" );

// accessing methods and properties

steve.sayHey();

這個(gè)示例中，不再為每個(gè) Person 實(shí)例定義 sayHey 方法，而是通過(guò)原型模板在各實(shí)例中共享這個(gè)方法。

繼承性

通過(guò)原型鏈，原型可以用來(lái)實(shí)例繼承。JavaScript 的每一個(gè)對(duì)象都有原型，而原型是另外一個(gè)對(duì)象，也有它自己的原型，周而復(fù)始…直到某個(gè)原型對(duì)象的原型是 null——原型鏈到此為止。

在訪問(wèn)一個(gè)方法或?qū)傩缘臅r(shí)候，JavaScript 首先檢查它們是否在對(duì)象中定義，如果不，則檢查是否定義在原型中。如果在原型中也沒(méi)找到，則會(huì)延著原型鏈一直找下去，直到找到，或者到達(dá)原型鏈的終端。

現(xiàn)在來(lái)看看代碼是怎么實(shí)現(xiàn)的?？梢詮纳弦粋€(gè)示例中的 Person 對(duì)象開(kāi)始，另外再創(chuàng)建一個(gè)叫 Employee 的對(duì)象。

// Our person object

function Person( name, email ) {

	this.name 	= name;
	this.email 	= email;

}

Person.prototype.sayHey = function() {

	console.log( "Hey, I’m " + this.name );

}

// A new employee object

function Employee( jobTitle ) {

	this.jobTitle = jobTitle;

}

現(xiàn)在 Employee 只有一個(gè)屬性。不過(guò)既然員工也屬于人，我們希望它能從 Person 繼承其它屬性。要達(dá)到這個(gè)目的，我們可以在 Employee 對(duì)象中調(diào)用 Person 的構(gòu)造函數(shù)，并配置原型鏈。

// Our person object

function Person( name, email ) {

	this.name 	= name;
	this.email 	= email;

}

Person.prototype.sayHey = function() {

	console.log( "Hey, I’m " + this.name );

}

// A new employee object

function Employee( name, email, jobTitle ) {

	// The call function is calling the Constructor of Person
	// and decorates Employee with the same properties

	Person.call( this, name, email );

	this.jobTitle = jobTitle;

}

// To set up the prototype chain, we create a new object using 
// the Person prototype and assign it to the Employee prototype

Employee.prototype = Object.create( Person.prototype );

// Now we can access Person properties and methods through the
// Employee object

var matthew = new Employee( "Matthew", "matthew@hotmail.com", "Developer" );

matthew.sayHey();

要適應(yīng)原型繼承還需要一些時(shí)間，但是這一個(gè)必須熟悉的重要概念。雖然原型繼承模型常常被認(rèn)為是 JavaScript 的弱點(diǎn)，但實(shí)際上它比傳統(tǒng)模型更強(qiáng)大。比如說(shuō)，在掌握了原型模型之后創(chuàng)建傳統(tǒng)模型簡(jiǎn)直就太容易了。

ECMAScript 6 引入了一組新的關(guān)鍵字用于實(shí)現(xiàn) 類。雖然新的設(shè)計(jì)看起來(lái)與傳統(tǒng)基于類的開(kāi)發(fā)語(yǔ)言非常接近，但它們并不相同。JavaScript 仍然基于原型。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com