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

Pluser 發布于2019-08-22 11:15 / 2403人閱讀

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

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

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

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

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

我對象親手寫出來的

沒有對象，自己造一個不就好了  --某資深黑魔法師前輩程序員

這是最簡單的創造對象的方式，簡單到只有一句話

var girlFriend = {};

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

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

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

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

至此一個相對完整的對象就創建出來了，我們可以隨意的查看她的內部屬性調用其內部方法

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

這種方式的優點在于簡單直接，便于理解，缺點在于只能創建單個對象(你還想怎樣)，往往在我們的應用／后宮中，需要創造多個實例對象，這也就是面向對象／后宮漫的意義不是嗎

我對象批量生成的

對于上面那個危險的想法，我們的思路是如果生成對象，能像執行函數那樣，傳入不同的參數自動生成不通的實例對象，哪豈不是十分方便，而事實上我們也是這么做的
最簡單的想法，就是將我們上面的方法封裝成一個函數

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!

結果如果我們所見，我們創建了兩個不同的對象實體，她們有著相同的屬性名稱但是確有不同的屬性值，這就是坊間所說的工廠模式
回頭想想雖然我們成功的創建了兩個對象實例，但是這兩個對象是無法被作為girlFriend對象來識別的，因為她們本就是在一個函數內部執行的過程中被創造出來的，之間并不存在什么聯系，這在開發中并不利于我們追根溯源，不信我們來看看

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

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

那我們換一種思路，既然js中函數皆對象，能不能有這么一個函數／對象，他本身可以傳入參數，然后以他本身為模版創造出相同類型的實例對象呢，js中就提供了一種特殊的函數，叫做構造函數，他的任務就是根據我們的要求／傳的參數，創造出和自己類型相同的的對象，而這種創建方法這就是坊間傳說的構造函數法

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

這就是一個構造函數了，對他的使用就如同我們在調用許多被封裝好的js庫一樣，其實都是按照自己的需求實例化js庫作者提前定義好的對象（這只是一個說話，構造函數中并沒有對象）
具體的方法如下

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

構造函數是一種特殊的函數，需要配合new來使用，在使用new運算符時執行了以下步驟

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

回過頭來檢查以下

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

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

當然，這種創建模式，還存在一些問題，并且還有其他的創建模式，放在下一篇博文中繼續踩坑啦

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

GPU云服務器云服務器 javascript對象 javascript 面向對象 javascript對象方法 JavaScript對象進階

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92059.html

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

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

hlcfan 2019-08-21 18:27 評論0 收藏0
javascript對象不完全探索記錄04：小伙子，你對象咋來的？中篇 - 現出你的原型！

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

trigkit4 2019-08-22 11:22 評論0 收藏0
從-1開始的ES6探索之旅02：小伙子，你對象咋來的？續篇 - 你的對象班（class）里來的？

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

incredible 2019-08-21 18:41 評論0 收藏0
從-1開始的ES6探索之旅01：顏文字成精的箭頭函數上篇 - 大哥，你指哪呢？

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

Snailclimb 2019-08-21 18:36 評論0 收藏0
javascript閉包不完全探索記錄01：閉包？啥餡的？

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

TANKING 2019-08-21 17:41 評論0 收藏0