淺析js的工廠函數、構造函數

_DangJin 發布于2019-08-26 10:10 / 1427人閱讀

摘要：首先，說下工廠函數。應對某些場景，工廠函數并不能滿足我們，如我需要判斷樹是不是動物類型你會發現你并沒辦法。這時候構造函數就出現了我的性別是猴子母猴子我的性別是母跟工廠函數很像，只是沒有了創建對象和，并且都用添加屬性。

首先，說下工廠函數。顧名思義，就好比一個工廠一樣，可以批量制造某種類型的東西。其實說白了就是封裝了個方法減少重復工作，相信稍微有點碼齡的人都懂。上代碼：

function animal (name,sex) {
        let obj = new Object()
        obj.name = name
        obj.sex = sex
        obj.saySex = function () {
            alert(`我的性別是${this.sex}`)
        }
        return obj
    }
    let monkey = animal("猴子","母")
    console.log(monkey.name)    //猴子
    monkey.saySex()             //我的性別是母

這樣寫主要是為了解決需要創建大量有屬性重疊的對象，如果每個都new一下，然后逐一添加屬性。這也是個累人的活。通過上面的代碼中，我們聲明了一個animal方法，此方法可批量制造動物。這樣每次只需要簡單的一行代碼就可以搞定一個動物的創建。

方便雖然方便，但是還是有缺點。就是每次新建的時候都需要在內部創建一個對象，然后進行一系列操作，最后返回。也就是說創建十次，那么就會創建十次全新的對象，然后返回并賦值。這樣創建的十個對象在代碼間的關系是沒有的，換句話說就是我們都產自動物，但是誰都不知道我們我們產自哪里。

應對某些場景，工廠函數并不能滿足我們，如：我需要判斷樹是不是動物類型,你會發現你并沒辦法。只能知道他是Object。這時候構造函數就出現了：

function animal (name,sex) {
        this.name = name
        this.sex = sex
        this.saySex = function () {
            alert(`我的性別是${this.sex}`)
        }
    }
    let monkey = new animal("猴子","母")
    console.log(monkey.name)    //猴子
    monkey.saySex()             //我的性別是母

跟工廠函數很像，只是沒有了創建對象和return，并且都用this添加屬性。聲明新對象的時候通過new關鍵字。這樣做的好處是，新建的對象間是有關系的，我們檢測下：

console.log(monkey instanceof animal)     //true
console.log(monkey instanceof Object)     //true

我們可以看到，他的類型既是animal也是Object。就好比你是你爸爸的后代，但同時也是你爺爺的后代。

GPU云服務器云服務器 JS構造函數工廠函數 js視頻 ava類中的構造函數構造函數

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

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

js面向對象淺析---對象創建的幾種常見方式

摘要：前言雖然使用構造函數或者使用對象字面量可以很方便的用來創建一個對象，但這種方式有一個明顯的缺點使用一個接口創建多個對象會產生很多冗余的代碼。即調用構造函數所創建的那個對象的原型對象好處是可以讓所有對象的實例共享他的屬性的方法。前言雖然使用Object構造函數或者使用對象字面量可以很方便的用來創建一個對象，但這種方式有一個明顯的缺點：使用一個接口創建多個對象會產生很多冗余的代碼。因此...

Invoker 2019-08-21 10:46 評論0 收藏0
Vue源碼淺析之異步組件注冊

showImg(https://segmentfault.com/img/bVba39I?w=400&h=400); Vue的異步組件注冊 Vue官方文檔提供注冊異步組件的方式有三種: 工廠函數執行 resolve 回調工廠函數中返回Promise 工廠函數返回一個配置化組件對象工廠函數執行 resolve 回調我們看下 Vue 官方文檔提供的示例: Vue.component(asyn...

Shonim 2019-08-23 18:07 評論0 收藏0
JavaScript系列--淺析原型鏈與繼承

摘要：綜上所述有原型鏈繼承，構造函數繼承經典繼承，組合繼承，寄生繼承，寄生組合繼承五種方法，寄生組合式繼承，集寄生式繼承和組合繼承的優點于一身是實現基于類型繼承的最有效方法。一、前言繼承是面向對象（OOP）語言中的一個最為人津津樂道的概念。許多面對對象（OOP）語言都支持兩種繼承方式:：接口繼承和實現繼承。接口繼承只繼承方法簽名,而實現繼承則繼承實際的方法。由于js中方法沒有簽名...

draveness 2019-08-23 18:06 評論0 收藏0
JS或Jquery

摘要：大潮來襲前端開發能做些什么去年谷歌和火狐針對提出了的標準，顧名思義，即的體驗方式，我們可以戴著頭顯享受沉浸式的網頁，新的標準讓我們可以使用語言來開發。 VR 大潮來襲 --- 前端開發能做些什么去年谷歌和火狐針對 WebVR 提出了 WebVR API 的標準，顧名思義，WebVR 即 web + VR 的體驗方式，我們可以戴著頭顯享受沉浸式的網頁，新的 API 標準讓我們可以使用 ...

CatalpaFlat 2019-08-22 11:17 評論0 收藏0
淺析Vue響應式原理（一）

摘要：淺析響應式原理一的特點之一是響應式，視圖隨著數據的更新而更新，在視圖中修改數據后實例中的數據也會同步更新。對于每個響應式數據，會有兩個實例，第一個是在中的閉包遍歷，用途顯而易見。接收一個回調函數，會在重新求值且值更新后執行。淺析Vue響應式原理（一） Vue的特點之一是響應式，視圖隨著數據的更新而更新，在視圖中修改數據后Vue實例中的數據也會同步更新。內部借助依賴(下文中的Dep類)...

lookSomeone 2019-08-23 13:42 評論0 收藏0