javascript對象不徹底探索記錄03：小夥子，你對象咋來的？上篇

舒適提示：做者的爬坑記錄，對你等大神徹底沒有價值，別在我這浪費生命

首先，說實話，我對不起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了

固然，這種建立模式，還存在一些問題，而且還有其餘的建立模式，放在下一篇博文中繼續踩坑啦

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