深入淺析JavaScript面向?qū)ο蠛驮秃瘮?shù)
對(duì)象,是javascript中非常重要的一個(gè)梗,是否能透徹的理解它直接關(guān)系到你對(duì)整個(gè)javascript體系的基礎(chǔ)理解,說白了,javascript就是一群對(duì)象在攪。。(嗶?。?。
下面給大家介紹下常用的幾種對(duì)象創(chuàng)建模式
使用new關(guān)鍵字創(chuàng)建
最基礎(chǔ)的對(duì)象創(chuàng)建方式,無非就是和其他多數(shù)語言一樣說的一樣:沒對(duì)象,你new一個(gè)呀!
var gf = new Object(); gf.name = "tangwei"; gf.bar = "c++"; gf.sayWhat = function() { console.log(this.name + "said:love you forever"); }
使用字面量創(chuàng)建
這樣似乎妥妥的了,但是宅寂的geek們豈能喜歡如此復(fù)雜和low土的定義變量的方式,作為一門腳本語言那應(yīng)該有和其他兄弟們一樣的范兒,于是出現(xiàn)了對(duì)象字面量的定義方式:
var gf = { name : "tangwei", bar : "c++", sayWhat : function() { console.log(this.name + "said:love you forever"); } }
工廠模式
實(shí)際上這是我們?cè)趯?shí)際中最常用的對(duì)象定義方式,但是我要有好多擁有相似屬性的對(duì)象(想想都讓人激動(dòng)。。。)怎么辦呢?那要是一個(gè)個(gè)的定義,就會(huì)產(chǎn)生大量的代碼,何不建個(gè)工廠,批量的生產(chǎn)出我們的對(duì)象呢,于是,javascript世界中第一個(gè)充氣娃。。。不,“工廠模式”誕生了!
function createGf(name, bar) { var o = new Object(); o.name = name; o.bar = bar; o.sayWhat = function() { alert(this.name + "said:love you forever"); } return o; } var gf1 = createGf("bingbing","d"); var gf2 = createGf("mimi","a");
構(gòu)造函數(shù)
工廠模式解決了多個(gè)相似對(duì)象的創(chuàng)建問題,但是問題又來了,這些對(duì)象都是Object整出來的,怎么區(qū)分它們的對(duì)象具體類型呢?這時(shí)候我們就需要切換到另一種模式了,構(gòu)造函數(shù)模式:
function Gf(name,bar){ this.name = name; this.bar = bar; this.sayWhat = function(){ alert(this.name + "said:love you forever"); } } var gf1 = new Gf("vivian","f"); var gf2 = new Gf("vivian2","f");
這里我們使用一個(gè)大寫字母開頭的構(gòu)造函數(shù)替代了上例中的createGf,注意按照約定構(gòu)造函數(shù)的首字母要大寫。在這里我們創(chuàng)建一個(gè)新對(duì)象,然后將構(gòu)造函數(shù)的作用域賦給新對(duì)象,調(diào)用構(gòu)造函數(shù)中的方法。
上面的方式似乎沒什么不妥,但是我們可以發(fā)現(xiàn),兩個(gè)實(shí)例中調(diào)用的構(gòu)造函數(shù)中的sayWhat方法不是同一個(gè)Function實(shí)例:
console.log(gf1.sayWhat == gf2.sayWhat); //false
調(diào)用同一個(gè)方法,卻聲明了不同的實(shí)例,實(shí)在浪費(fèi)資源。我們可以優(yōu)化一下將sayWhat函數(shù)放到構(gòu)造函數(shù)外面聲明:
function Gf(name,bar){ this.name = name; this.bar = bar; this.sayWhat = sayWhat } function sayWhat(){ alert(this.name + "said:love you forever"); }
這樣解決了,多個(gè)實(shí)例多次定義同一個(gè)方法實(shí)例的問題,但是新問題又來了,我們定義的sayWhat是一個(gè)全局作用域的方法,但這個(gè)方法其實(shí)是沒法直接調(diào)用的,這就有點(diǎn)矛盾了。如何更優(yōu)雅的定義一個(gè)具備一定封裝性的對(duì)象呢?我們來看一下javascript原型對(duì)象模式。
原型對(duì)象模式
理解原型對(duì)象
當(dāng)我們創(chuàng)建一個(gè)函數(shù)時(shí),該函數(shù)就會(huì)具備一個(gè)prototype屬性,這個(gè)屬性指向通過構(gòu)造函數(shù)創(chuàng)建的那個(gè)函數(shù)的原型對(duì)象。通俗點(diǎn)講原型對(duì)象就是內(nèi)存中為其他對(duì)象提供共享屬性和方法的對(duì)象。
在原型模式中,不必再構(gòu)造函數(shù)中定義實(shí)例屬性,可以將屬性信息直接賦予原型對(duì)象:
function Gf(){ Gf.prototype.name = "vivian"; Gf.prototype.bar = "c++"; Gf.prototype.sayWhat = function(){ alert(this.name + "said:love you forever"); } } var gf1 = new Gf(); gf1.sayWhat(); var gf2 = new Gf();
和構(gòu)造函數(shù)不同的是這里新對(duì)象的屬性和方法是所有實(shí)例都可以共享的,換句話說gf1和gf2訪問的是同一份屬性和方法。原型對(duì)象中除了我們賦予的屬性外,還有一些內(nèi)置的屬性,所有原型對(duì)象都具備一個(gè)constructor屬性,這個(gè)屬性是一個(gè)指向包含prototype屬性函數(shù)的一個(gè)指針(敢不敢再繞點(diǎn)?。?。通過一幅圖我們來清楚的理一下這個(gè)繞口的流程:
所有的對(duì)象都有一個(gè)原型對(duì)象(prototype),原型對(duì)象中有一個(gè)constructor屬性指向包含prototype屬性的函數(shù),Gf的實(shí)例gf1和gf2都包含一個(gè)內(nèi)部屬性指向原型對(duì)象(在firefox瀏覽器中表現(xiàn)為私有屬性proto),當(dāng)我們?cè)L問一個(gè)對(duì)象中的屬性時(shí),首先會(huì)詢問實(shí)例對(duì)象中有沒有該屬性,如果沒有則繼續(xù)查找原型對(duì)象。
使用原型對(duì)象
在前面的示例中,我們注意到在為原型對(duì)象添加屬性時(shí),需要每個(gè)都增加Gf.prototype,這個(gè)工作很重復(fù),在上面對(duì)象的創(chuàng)建模式中,我們知道可以通過字面量的形式創(chuàng)建一個(gè)對(duì)象,這里我們也可以改進(jìn)一下:
function Gf(){} Gf.prototype = { name : "vivian", bar : "c++", sayWhat : function(){ alert(this.name + "said:love you forever"); } }
這里有一個(gè)地方需要特別注意下,constructor屬性不再指向?qū)ο驡f,因?yàn)槊慷x一個(gè)函數(shù),就會(huì)同時(shí)為其創(chuàng)建一個(gè)prototype對(duì)象,這個(gè)對(duì)象也會(huì)自動(dòng)獲取一個(gè)新的constructor屬性,這個(gè)地方我們使用Gf.prototype本質(zhì)上覆寫了原有的prototype對(duì)象,因此constructor也變成了新對(duì)象的constructor屬性,不再指向Gf,而是Object:
var gf1 = new Gf(); console.log(gf1.constructor == Gf);//false console.log(gf1.constructor == Object)//true
一般情況下,這個(gè)微妙的改變是不會(huì)對(duì)我們?cè)斐捎绊懙?,但如果你?duì)constructor有特殊的需求,我們也可以顯式的指定下Gf.prototype的constructor屬性:
Gf.prototype = { constructor : Gf, name : "vivian", bar : "c++", sayWhat : function() { alert(this.name + "said:love you forever"); } } var gf1 = new Gf(); console.log(gf1.constructor == Gf);//true
通過對(duì)原型對(duì)象模式的初步了解,我們發(fā)現(xiàn)所有的實(shí)例對(duì)象都共享相同的屬性,這是原型模式的基本特點(diǎn),但往往對(duì)于開發(fā)者來說這是把“雙刃劍”,在實(shí)際開發(fā)中,我們希望的實(shí)例應(yīng)該是具備自己的屬性,這也是在實(shí)際開發(fā)中很少有人單獨(dú)使用原型模式的主要原因。
構(gòu)造函數(shù)和原型組合模式
在實(shí)際開發(fā)中,我們可以使用構(gòu)造函數(shù)來定義對(duì)象的屬性,使用原型來定義共享的屬性和方法,這樣我們就可以傳遞不同的參數(shù)來創(chuàng)建出不同的對(duì)象,同時(shí)又擁有了共享的方法和屬性。
function Gf(name,bar){ this.name = name; this.bar = bar; } Gf.prototype = { constructor : Gf, sayWhat : function() { alert(this.name + "said:love you forever"); } } var gf1 = new Gf("vivian", "f"); var gf2 = new Gf("vivian1", "c");
在這個(gè)例子中,我們?cè)贅?gòu)造函數(shù)中定義了對(duì)象各自的屬性值,在原型對(duì)象中定義了constructor屬性和sayWhat函數(shù),這樣gf1和gf2屬性之間就不會(huì)產(chǎn)生影響了。這種模式也是實(shí)際開發(fā)中最常用的對(duì)象定義方式,包括很多JS庫(bootstrap等)默認(rèn)的采用的模式。
以上所述是小編給大家介紹的JavaScript面向?qū)ο蠛驮秃瘮?shù),希望對(duì)大家有所幫助。
- JavaScript面向?qū)ο缶帉戀徫镘嚬δ?/a>
- JS 面向?qū)ο笾^承---多種組合繼承詳解
- javascript面向?qū)ο蟪绦蛟O(shè)計(jì)高級(jí)特性經(jīng)典教程(值得收藏)
- 解析JavaScript面向?qū)ο蟾拍钪械腛bject類型與作用域
- JS實(shí)現(xiàn)簡(jiǎn)單面向?qū)ο蟮念伾x擇器實(shí)例
- JS面向?qū)ο缶幊淘斀?/a>
- JS面向?qū)ο螅?)之Object類,靜態(tài)屬性,閉包,私有屬性, call和apply的使用,繼承的三種實(shí)現(xiàn)方法
- 學(xué)習(xí)Javascript面向?qū)ο缶幊讨庋b
- js面向?qū)ο蟮膶懛?/a>
- Javascript之面向?qū)ο?-方法
相關(guān)文章
Javascript判斷文件是否存在(客戶端/服務(wù)器端)
這篇文章主要介紹了Javascript判斷文件是否存在的方法適用于客戶端、服務(wù)器端,遠(yuǎn)程文件,示例代碼如下,需要的朋友可以參考下2014-09-09Javascript基于對(duì)象三大特性(封裝性、繼承性、多態(tài)性)
這篇文章主要介紹了Javascript基于對(duì)象三大特性,包括封裝性、繼承性、多態(tài)性,感興趣的小伙伴們可以參考一下2016-01-01JavaScript 中實(shí)現(xiàn) use strict的方法及優(yōu)勢(shì)
本教程將討論JavaScript中的use strict特性,在這里,我們將通過不同的示例了解如何在JavaScript代碼語句中創(chuàng)建和執(zhí)行use strict關(guān)鍵字,需要的朋友可以參考下2023-09-09JavaScript分秒倒計(jì)時(shí)器實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript分秒倒計(jì)時(shí)器實(shí)現(xiàn)方法,可實(shí)現(xiàn)按照毫秒倒計(jì)時(shí)的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02layui 給數(shù)據(jù)表格加序號(hào)的方法
今天小編就為大家分享一篇layui 給數(shù)據(jù)表格加序號(hào)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08