手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

JavaScript 中的面向?qū)ο缶幊?/h2>

2016-9-2    藍(lán)藍(lán)設(shè)計的小編

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

介紹

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

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

命名空間

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

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

嵌套命名空間

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

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

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

上述的語法會檢查MyApp是否已經(jīng)被定義過。假如它已經(jīng)被定義過,我們簡單地把它賦值給自己,但是,我們創(chuàng)建一個空的容器來裝載我們的函數(shù)和變量。

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

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

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

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

對象

如果你寫過 JavaScript 代碼,那你已經(jīng)使用過對象了。JavaScript 有三種類型的對象:

原生對象

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

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

宿主對象

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

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

用戶對象

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

對象字面量

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

現(xiàn)在定義一個對象字面量并賦予一個變量:

// declaring an object literal var dog = { // object literal definition comes here... };

向這個對象字面量添加屬性和方法,然后在全局作用域訪問:

// 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!

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

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

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

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

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

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

// 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)鍵字來生成實(shí)例并賦予變量。每次使用 new 關(guān)鍵字,this 都指向一個新的實(shí)例。

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

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

方法和原型

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

在 JavaScript 中,prototype 是一個非常特別的屬性,可以讓我們?yōu)閷ο筇砑有碌膶傩院头椒ā,F(xiàn)在用原型重寫上面的示例看看:

// 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();

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

繼承性

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

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

現(xiàn)在來看看代碼是怎么實(shí)現(xiàn)的。可以從上一個示例中的 Person 對象開始,另外再創(chuàng)建一個叫 Employee 的對象。

// 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 只有一個屬性。不過既然員工也屬于人,我們希望它能從 Person 繼承其它屬性。要達(dá)到這個目的,我們可以在 Employee 對象中調(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)原型繼承還需要一些時間,但是這一個必須熟悉的重要概念。雖然原型繼承模型常常被認(rèn)為是 JavaScript 的弱點(diǎn),但實(shí)際上它比傳統(tǒng)模型更強(qiáng)大。比如說,在掌握了原型模型之后創(chuàng)建傳統(tǒng)模型簡直就太容易了。

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

 

藍(lán)藍(lán)設(shè)計www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計  包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù) 

 

分享本文至:

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://www.88yangsc.com

存檔