成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

javascript對象不完全探索記錄03：小伙子，你對象咋來的？上篇

Pluser / 2459人閱讀

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

溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命

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

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

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

我對象親手寫出來的 
沒有對象，自己造一個不就好了  --某資深黑魔法師前輩程序員

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

var girlFriend = {};

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

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

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

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

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

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

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

我對象批量生成的

對于上面那個危險的想法，我們的思路是如果生成對象，能像執(zhí)行函數(shù)那樣，傳入不同的參數(shù)自動生成不通的實例對象，哪豈不是十分方便，而事實上我們也是這么做的
最簡單的想法，就是將我們上面的方法封裝成一個函數(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é)果如果我們所見，我們創(chuàng)建了兩個不同的對象實體，她們有著相同的屬性名稱但是確有不同的屬性值，這就是坊間所說的工廠模式
回頭想想雖然我們成功的創(chuàng)建了兩個對象實例，但是這兩個對象是無法被作為girlFriend對象來識別的，因為她們本就是在一個函數(shù)內(nèi)部執(zhí)行的過程中被創(chuàng)造出來的，之間并不存在什么聯(lián)系，這在開發(fā)中并不利于我們追根溯源，不信我們來看看

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

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

那我們換一種思路，既然js中函數(shù)皆對象，能不能有這么一個函數(shù)／對象，他本身可以傳入?yún)?shù)，然后以他本身為模版創(chuàng)造出相同類型的實例對象呢，js中就提供了一種特殊的函數(shù)，叫做構(gòu)造函數(shù)，他的任務(wù)就是根據(jù)我們的要求／傳的參數(shù)，創(chuàng)造出和自己類型相同的的對象，而這種創(chuàng)建方法這就是坊間傳說的構(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òu)造函數(shù)了，對他的使用就如同我們在調(diào)用許多被封裝好的js庫一樣，其實都是按照自己的需求實例化js庫作者提前定義好的對象（這只是一個說話，構(gòu)造函數(shù)中并沒有對象）
具體的方法如下

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來使用，在使用new運算符時執(zhí)行了以下步驟

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

回過頭來檢查以下

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

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

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

能看到這里都明白的估計是個死宅了

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/92059.html

相關(guān)文章

  • javascript對象不完全探索記錄05：小伙子，你對象咋來的？下篇 - 啥樣的對象適合你

    摘要：溫馨提示作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命溫馨提示續(xù)本文內(nèi)容簡單，發(fā)揚了潛入潛出的精神，請謹(jǐn)慎浪費時間溫馨提示再續(xù)魔卡少女櫻動畫再開撒花經(jīng)過前兩篇文章的梳理對象不完全探索記錄小伙子，你對象咋來的上篇對象不完全探索記 溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命溫馨提示-續(xù)：本文內(nèi)容簡單，發(fā)揚了潛入潛出的精神，請謹(jǐn)慎浪費時間溫馨提示-再續(xù)：《魔...

    hlcfan 評論0 收藏0

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

    摘要：譯者注根據(jù)定義，沒有原型，并作為這個原型鏈中的最后一個環(huán)節(jié)。由于這個屬性不標(biāo)準(zhǔn)，因此一般不提倡使用。中用函數(shù)獲得一個對象的。 溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命 在上一篇博文javascript對象不完全探索記錄03：小伙子，你對象咋來的？上篇，中大概說了說在js中，比較好理解的對象創(chuàng)建方式，分別是直接定義／字面量，和調(diào)用構(gòu)造函數(shù) 你對象還有原型？ 在一...

    trigkit4 評論0 收藏0

  • 從-1開始的ES6探索之旅02：小伙子，你對象咋來的？續(xù)篇 - 你的對象班（class）里來的？

    摘要：這是因為子類沒有自己的對象，而是繼承父類的對象，然后對其進行加工。 溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命溫馨提示-續(xù)：你們要非得看，我也攔不住，但是至少得準(zhǔn)備個支持ES6的Chrome瀏覽器吧？溫馨提示-再續(xù)：ES6簡直了，放著不用簡直令人發(fā)指！ 書接上回，即便是程序員，也還是能夠通過自己的努力辛辛苦苦找到合適對象的，見前文《javascript對象不完全...

    incredible 評論0 收藏0

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

    摘要：基礎(chǔ)語法參數(shù)參數(shù)參數(shù)函數(shù)聲明參數(shù)參數(shù)參數(shù)表達(dá)式單一相當(dāng)于參數(shù)參數(shù)參數(shù)表達(dá)式當(dāng)只有一個參數(shù)時，圓括號是可選的單一參數(shù)函數(shù)聲明單一參數(shù)函數(shù)聲明沒有參數(shù)的函數(shù)應(yīng)該寫成一對圓括號。 溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命溫馨提示-續(xù)：你們要非得看，我也攔不住，但是至少得準(zhǔn)備個支持ES6的Chrome瀏覽器吧？ 之前在某些大神的代碼中出現(xiàn)一串神秘符號類似于num =>...

    Snailclimb 評論0 收藏0

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

    摘要：閉包一詞來源于以下兩者的結(jié)合要執(zhí)行的代碼塊由于自由變量被包含在代碼塊中，這些自由變量以及它們引用的對象沒有被釋放和為自由變量提供綁定的計算環(huán)境作用域。在以及及以上等語言中都能找到對閉包不同程度的支持。 溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命 閉包，好吃嗎 ？ 第一次聽到這個詞，很不幸是在一次面試中，可想而知結(jié)果很細(xì)碎，從此閉包和跨域在我匱乏的前端知識中成為了...

    TANKING 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<