javascript對(duì)象不完全探索記錄03：小伙子，你對(duì)象咋來(lái)的？上篇

Pluser 發(fā)布于2019-08-22 11:15 / 2406人閱讀

摘要：看著別人寫(xiě)的功能對(duì)，就直接拿過(guò)來(lái)用，寫(xiě)出來(lái)的代碼臃腫到爆炸，滿(mǎn)屏幕的的初級(jí)使用方式，運(yùn)氣好了能湊合跑起來(lái)，出了問(wèn)題全臉懵逼，心中安慰自己一萬(wàn)遍我可是干設(shè)計(jì)的，但是既然打算好好整下就得從頭開(kāi)始看了。

溫馨提示：作者的爬坑記錄，對(duì)你等大神完全沒(méi)有價(jià)值，別在我這浪費(fèi)生命

首先，說(shuō)實(shí)話，我對(duì)不起javascript，作為一個(gè)接觸前端快10年的老前端(偽)，一直發(fā)揚(yáng)的是不求甚解的拿來(lái)就用主義。
看著別人寫(xiě)的功能對(duì)，就直接拿過(guò)來(lái)用，寫(xiě)出來(lái)的代碼臃腫到爆炸，滿(mǎn)屏幕的jquery的初級(jí)使用方式，運(yùn)氣好了能湊合跑起來(lái)，出了問(wèn)題全臉懵逼，心中安慰自己一萬(wàn)遍我可是干設(shè)計(jì)的，但是既然打算好好整下js就得從頭開(kāi)始看了。

希望能夠從源頭制止一些錯(cuò)誤的發(fā)生

既然從頭來(lái)，那我就來(lái)重新審視一下面相對(duì)象程序基礎(chǔ)的基礎(chǔ)：創(chuàng)建對(duì)象
于是又看了成噸博文
JavaScript中的對(duì)象，如何創(chuàng)建對(duì)象，創(chuàng)建對(duì)象的7種模式 - 旗smile
JS中創(chuàng)建對(duì)象的幾種常用方法 - ifcode
ECMAScript 定義類(lèi)或?qū)ο?- w3school(深度好文，強(qiáng)烈推薦)

我對(duì)象親手寫(xiě)出來(lái)的

沒(méi)有對(duì)象，自己造一個(gè)不就好了  --某資深黑魔法師前輩程序員

這是最簡(jiǎn)單的創(chuàng)造對(duì)象的方式，簡(jiǎn)單到只有一句話

var girlFriend = {};

搓搓手，下一步我們給她添加些屬性和方法，讓她看上去更真實(shí)(有意義)

girlFriend.name = "REI"；
girlFriend.moeType = "silent";
girlFriend.hairColor = "blue";
girlFriend.sayHello = function(){
    return "..."
}

我們也可以用一種更直接可讀性更強(qiáng)的方式來(lái)創(chuàng)建

var girlFriend = {
    name : "REI",
    moeType : "silent",
    hairColor : "blue",
    sayHello : function(){
        return "..."
    }
}

至此一個(gè)相對(duì)完整的對(duì)象就創(chuàng)建出來(lái)了，我們可以隨意的查看她的內(nèi)部屬性調(diào)用其內(nèi)部方法

console.log(girlFriend.name)//REI
console.log(girlFriend.sayHello)//...

這種方式的優(yōu)點(diǎn)在于簡(jiǎn)單直接，便于理解，缺點(diǎn)在于只能創(chuàng)建單個(gè)對(duì)象(你還想怎樣)，往往在我們的應(yīng)用／后宮中，需要?jiǎng)?chuàng)造多個(gè)實(shí)例對(duì)象，這也就是面向?qū)ο螅髮m漫的意義不是嗎

我對(duì)象批量生成的

對(duì)于上面那個(gè)危險(xiǎn)的想法，我們的思路是如果生成對(duì)象，能像執(zhí)行函數(shù)那樣，傳入不同的參數(shù)自動(dòng)生成不通的實(shí)例對(duì)象，哪豈不是十分方便，而事實(shí)上我們也是這么做的
最簡(jiǎn)單的想法，就是將我們上面的方法封裝成一個(gè)函數(shù)

function GirlFriend(name,moeType,hairColor){
    var girlFriend = {};
    girlFriend.name = name;
    girlFriend.moeType = moeType;
    girlFriend.hairColor = hairColor;
    girlFriend.sayHello = function(){
        return moeType == "silent"?"..." : "Ohayo!"
    }
    return girlFriend;
}
var rei = GirlFriend("Rei","silent","blue");
var asuka = GirlFriend("Atsuka","genki","red");
console.log(rei.sayHello());//...
console.log(asuka.sayHello());//Ohayo!

結(jié)果如果我們所見(jiàn)，我們創(chuàng)建了兩個(gè)不同的對(duì)象實(shí)體，她們有著相同的屬性名稱(chēng)但是確有不同的屬性值，這就是坊間所說(shuō)的工廠模式
回頭想想雖然我們成功的創(chuàng)建了兩個(gè)對(duì)象實(shí)例，但是這兩個(gè)對(duì)象是無(wú)法被作為girlFriend對(duì)象來(lái)識(shí)別的，因?yàn)樗齻儽揪褪窃谝粋€(gè)函數(shù)內(nèi)部執(zhí)行的過(guò)程中被創(chuàng)造出來(lái)的，之間并不存在什么聯(lián)系，這在開(kāi)發(fā)中并不利于我們追根溯源，不信我們來(lái)看看

console.log(rei instanceof GirlFriend);//false

整這么半天，生成的Rei根本就不是girlFriend，只是看上去像而已／復(fù)制品

那我們換一種思路，既然js中函數(shù)皆對(duì)象，能不能有這么一個(gè)函數(shù)／對(duì)象，他本身可以傳入?yún)?shù)，然后以他本身為模版創(chuàng)造出相同類(lèi)型的實(shí)例對(duì)象呢，js中就提供了一種特殊的函數(shù)，叫做構(gòu)造函數(shù)，他的任務(wù)就是根據(jù)我們的要求／傳的參數(shù)，創(chuàng)造出和自己類(lèi)型相同的的對(duì)象，而這種創(chuàng)建方法這就是坊間傳說(shuō)的構(gòu)造函數(shù)法

GirlFriend = function(name, moeType, hairColor) {
    this.name = name;
    this.moeType = moeType;
    this.hairColor = hairColor;
    this.sayHello = function() {
        return moeType == "silent" ? "..." : "Ohayo!"
    }
}

這就是一個(gè)構(gòu)造函數(shù)了，對(duì)他的使用就如同我們?cè)谡{(diào)用許多被封裝好的js庫(kù)一樣，其實(shí)都是按照自己的需求實(shí)例化js庫(kù)作者提前定義好的對(duì)象（這只是一個(gè)說(shuō)話，構(gòu)造函數(shù)中并沒(méi)有對(duì)象）
具體的方法如下

var rei = new GirlFriend("Rei", "silent", "blue");
var asuka = new GirlFriend("Atsuka", "genki", "red");
console.log(rei.sayHello());//...
console.log(asuka.sayHello());//Ohayo!

構(gòu)造函數(shù)是一種特殊的函數(shù)，需要配合new來(lái)使用，在使用new運(yùn)算符時(shí)執(zhí)行了以下步驟

1.創(chuàng)建一個(gè)新的對(duì)象
2.將構(gòu)造函數(shù)作用域賦給新的對(duì)象（即this指向新對(duì)象，只有通過(guò)this才能訪問(wèn)）
3.執(zhí)行構(gòu)造函數(shù)里面的代碼
4.返回新的對(duì)象
部分引自js工廠模式、構(gòu)造函數(shù)以及他們創(chuàng)建對(duì)象的優(yōu)缺點(diǎn)？— 第6.2.1節(jié) - flyingpig2016

回過(guò)頭來(lái)檢查以下

console.log(rei instanceof GirlFriend);//true
console.log(asuka instanceof GirlFriend);//true

這回ok了，Rei和Asuka妥妥的都是girlFriend了

當(dāng)然，這種創(chuàng)建模式，還存在一些問(wèn)題，并且還有其他的創(chuàng)建模式，放在下一篇博文中繼續(xù)踩坑啦

能看到這里都明白的估計(jì)是個(gè)死宅了

GPU云服務(wù)器云服務(wù)器 javascript對(duì)象 javascript 面向?qū)ο?/a> javascript對(duì)象方法 JavaScript對(duì)象進(jìn)階

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92059.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Pluser

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

《JavaScript百煉成仙》統(tǒng)一回復(fù)粉絲們的一些問(wèn)題

閱讀 1881·2021-11-15 11:39
搭載超高性能RSSD云盤(pán)的快杰云數(shù)據(jù)庫(kù)UDB重磅上線

閱讀 1088·2020-12-03 17:06
UCloud撬動(dòng)?xùn)|南亞市場(chǎng)，占領(lǐng)競(jìng)技手游“淘金地”

閱讀 742·2019-12-27 11:42
1像素下邊框引發(fā)移動(dòng)端設(shè)備像素比的應(yīng)用

閱讀 3277·2019-08-30 13:59
JS手動(dòng)實(shí)現(xiàn)柯里化(curry)函數(shù)

閱讀 1469·2019-08-26 13:22
遮罩層彈框頁(yè)面滾動(dòng)

閱讀 3291·2019-08-26 12:15
js深度克隆的幾種方法

閱讀 2479·2019-08-26 10:22
調(diào)用攝像頭-截圖并保存圖像

閱讀 1566·2019-08-23 18:40

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

javascript對(duì)象不完全探索記錄03：小伙子，你對(duì)象咋來(lái)的？上篇

相關(guān)文章

javascript對(duì)象不完全探索記錄05：小伙子，你對(duì)象咋來(lái)的？下篇 - 啥樣的對(duì)象適合你

javascript對(duì)象不完全探索記錄04：小伙子，你對(duì)象咋來(lái)的？中篇 - 現(xiàn)出你的原型！

**從-1開(kāi)始的ES6探索之旅02：小伙子，你對(duì)象咋來(lái)的？續(xù)篇 - 你的對(duì)象班（class）里來(lái)的？**

從-1開(kāi)始的ES6探索之旅01：顏文字成精的箭頭函數(shù) 上篇 - 大哥，你指哪呢？

javascript閉包不完全探索記錄01：閉包？啥餡的？

發(fā)表評(píng)論

0條評(píng)論

Pluser

男|高級(jí)講師

TA的文章

《JavaScript百煉成仙》統(tǒng)一回復(fù)粉絲們的一些問(wèn)題

搭載超高性能RSSD云盤(pán)的快杰云數(shù)據(jù)庫(kù)UDB重磅上線

UCloud撬動(dòng)?xùn)|南亞市場(chǎng)，占領(lǐng)競(jìng)技手游“淘金地”

1像素下邊框引發(fā)移動(dòng)端設(shè)備像素比的應(yīng)用

JS手動(dòng)實(shí)現(xiàn)柯里化(curry)函數(shù)

遮罩層彈框頁(yè)面滾動(dòng)

js深度克隆的幾種方法

調(diào)用攝像頭-截圖并保存圖像

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

javascript對(duì)象不完全探索記錄03：小伙子，你對(duì)象咋來(lái)的？上篇

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

javascript對(duì)象不完全探索記錄03：小伙子，你對(duì)象咋來(lái)的？上篇