士心是剛剛從事一年前端工作的半個小白，對一切事物都懵懂而又好奇，年前由於個人原因離開了上一家公司，年後返深才知道一個半懂不懂的小白前端要找一份稱心的工作有多麼地艱難，在海量投遞簡歷之後，終於功夫不負有心人，找到了一份還算滿意的工作，從此又開始了前端江湖的練級之路

入職的第一天

入職的第一天，專案經理分下來一個驗證表單功能的任務，內容不多，僅需要驗證使用者名稱，郵箱 ，密碼等，士心接到需求看了看，感覺很簡單，便寫下幾個函式。

士心寫完之後就要把自己的程式碼提交到團隊專案裡，就在此時，一位工作多年的GEEK(後面稱作老G)看到士心要提交的程式碼搖了搖頭說：“士心，等一下，先不要提交。”

“怎麼了？”“你建立了很多全域性變數呀”“變數？我只是寫了幾個函式而已”“函式不是變數麼？”老G反問道。此時士心不知所措，心想：“難道函式是變數？”臉瞬間覺了下來。老G見此情形忙笑著說：“彆著急，你看，如果我這麼宣告幾個變數來實現你的功能你看可以麼”

“一樣的，只不過。。。”“對，只不過這個在用的時候要提前宣告，但是這麼看你就會發現你建立 了3個函式儲存在變數裡來實現你的功能，而你寫的是將你的變數名放在function後而已，它也代表了你的變數，所以說你也聲明瞭3個全域性變數”“這有什麼問題 呢？”“從功能上講當然沒問題，但是今天你加入了我們的團隊，在團隊開發中你所寫的程式碼就不能只考慮自己了，也要考慮不影響到他人，如果別人也定義了同樣的方法就會覆蓋掉原有的功能了，如果你定義了很多方法，這種相互覆蓋的問題是很不容易察覺到的”“那我應該如何避免呢？”士心問道。“你可以將他們放在一個變數裡儲存，這樣就可以減少覆蓋或被覆蓋的風險，當然一旦被覆蓋，所有的功能都會失效，這種現象也是很明顯的，你自然也會很輕易覺察到”“可是我該如何做呢？”士心迫不及待問道。

用物件收編變數

“一猜你就會問”“好吧，請你先簡單地說一下”物件你知道吧，它有屬性和方法，而如果我們要訪問它的屬性或者方法時，可通過點語法向下遍歷查詢得到。我們可以建立 一個檢測 物件，然後把我們的方法放在裡面”

“此時我們將所有的函式 作為CheckObject物件的方法，這樣我們就只有一個物件，而我們要想使用它們也很簡單，比如檢測 姓名CheckObject.checkName(),只是在我們原來使用的函式 式前面多了一個物件名稱。”“哦，這樣呀，但是我們既然可以通過點語法來使用方法，我們是不是也可以這麼建立 呢？”

物件的另一種形式

“當然，不過首先你要宣告一個物件，然後給它新增 方法，當然在JavaScript中函式 也是物件，所以你可以這麼做”

“使用和前面的方式是一樣的，比如CheckObject.checkName()”老G接著說，“現在雖然能滿足你的需求，但當別人想用你寫的物件方法時就有些麻煩了，因為這個物件不能複製一份或者說這個物件類在用new關鍵字建立 新的物件時，新建立 的物件是不能繼承這些方法的”“但是複製又有什麼用呢？”士心不解地問“給你舉個例子吧，假如你喜歡javascript，你買了這本書，然後回去你的小夥伴看見了，感 覺很有用，他們也想要怎麼辦，書就這麼一本。但如果你買的是一臺印表機，那麼好吧，即使你的小夥伴再多，你也有能力給他們每個人列印一本”“哦，有些明白了，但是我該如何做到呢？”

真假物件

老G解釋說：“如果你想簡單地複製一下，你可以將這些方法放在一個函式 物件中”於是老G將程式碼寫下

士心看了看程式碼，思考一下說：“哦，你寫的看上去是，當每次呼叫這個函式 的時候，把我們之前寫的那個物件返回出來，當別人每次呼叫這個函式 時都返回了一個新物件，這樣執行過程中明面上是CheckObject物件，可實際上是返回的新物件，這樣每個人在使用時就互不影響了。比如想檢測 郵箱可以像這樣吧”

未完待續。。。

最後，如果有想一起學習web前端，HTML5及JavaScript的可以來一下我的前端群733581373，好友都會在裡面交流，分享一些學習的方法和需要注意的小細節，每天也會準時的講一些前端的炫酷特效，及前端直播課程學習

如果想看到更加系統的文章和學習方法經驗可以關注的微訊號：‘web前端技術圈’或者‘webxh6’關注後回覆‘2018’可以領取一套完整的學習視訊