深入淺出面向?qū)ο蠛驮汀靖拍钇?】

DevTTL 發(fā)布于2019-08-26 11:43 / 2489人閱讀

摘要：墻裂建議您在看這篇文章之前閱讀一遍我之前寫的文章深入淺出面向?qū)ο蠛驮透拍钇驗(yàn)榇似恼律婕暗讲簧傧嚓P(guān)概念都在上篇文章里啦簡單復(fù)習(xí)對象對象是老生常談的概念了，在這里我們來簡單復(fù)習(xí)一下對象內(nèi)儲存一個(gè)對象對象是一個(gè)儲存一系列無序鍵值對的集合的

墻裂建議您在看這篇文章之前閱讀一遍我之前寫的文章深入淺出面向?qū)ο蠛驮汀靖拍钇?】，因?yàn)榇似恼律婕暗讲簧傧嚓P(guān)概念都在上篇文章里啦

1.1 簡單復(fù)習(xí)對象

對象是老生常談的概念了，在這里我們來簡單復(fù)習(xí)一下

var obj = {
        a: 1, 
        b: "hello",
        c: true,
        d: function () {
            console.log("hello")
        },
        e: {
            e_1: "對象內(nèi)儲存一個(gè)對象"
        }
    }

對象是一個(gè)儲存一系列無序 key: value【鍵值對】的集合的容器

注意：核心是要將對象作為一個(gè)容器看待

使用對象作為容器的這個(gè)特性我們可以進(jìn)行封裝，這會產(chǎn)生兩個(gè)好處

讓我們的代碼變得優(yōu)雅、易讀

規(guī)避全局變量

1.2 通過構(gòu)造函數(shù)創(chuàng)建對象 1.2.1 關(guān)于function的額外知識

function作為構(gòu)造函數(shù)（通過new操作符調(diào)用）的時(shí)候會返回一個(gè)類型為function的對象

function可以接受參數(shù)，可以根據(jù)參數(shù)來創(chuàng)建 相同類型不同值 的對象

function實(shí)例作用域內(nèi)有一個(gè)constructor屬性，這個(gè)屬性就可以指示其構(gòu)造器

1.2.2 學(xué)會使用 new Function

new 運(yùn)算符接受一個(gè)函數(shù) F 及其參數(shù)：new F(arguments...)

創(chuàng)建類的實(shí)例——這步是把一個(gè)空的對象的__proto__屬性設(shè)置為 F.prototype

初始化實(shí)例——函數(shù) F 被傳入?yún)?shù)并調(diào)用，關(guān)鍵字 this 被設(shè)定為該實(shí)例

返回實(shí)例

    function People(name) {
        this.name = name
        this.sayName = function () {
            console.log(name)
        }
        // 一般在這個(gè)函數(shù)里不要 return
        // 如果return引用類型的話，等于把return的值賦值給p1
    }

    People() // this指向全局變量，name和sayName成為了全局變量的屬性

    var p1 = new People("sad")
    // 第一步：instance = {} 創(chuàng)建了一個(gè)類的實(shí)例 —— 空對象，并且將空的對象的__proto__屬性設(shè)置為 F.prototype，也就是說
    // 第二步：執(zhí)行函數(shù)People()，并傳入?yún)?shù)"sad"，并將this指向p1
    // 第三步：return instance【實(shí)例】 , 即把instance賦值給p1

    // 請注意 People()是一個(gè)函數(shù)，new People()是構(gòu)造函數(shù)

    var p2 = new People("angry")

1.2.3 instanceof

instance 的中文意思為 實(shí)例
那么 instanceof 自然就是用來判斷對象是否為某個(gè)類型的實(shí)例

    console.log(p1 instanceof People) // true
    // 意思是判斷 對象（p1）是否為某個(gè)類型（People）的實(shí)例
    // p1 是由 People 構(gòu)建出來的，自然是People的實(shí)例，返回為true

但需要注意的是，instanceof 運(yùn)算符的工作原理是檢測 類的prototype 是否存在實(shí)例的原型鏈上

    console.log(p1 instanceof Object) // true
    // 因?yàn)镺bject.prototype可以被實(shí)例p1以原型鏈的方式訪問到

1.2.4 構(gòu)造函數(shù)存在的問題

構(gòu)造函數(shù)在解決了上面所有問題，同時(shí)為實(shí)例帶來了類型
但可以注意到在上例中，每個(gè)的實(shí)例的方法作用是一樣的
但是每個(gè)實(shí)例被創(chuàng)建的時(shí)候都要重新聲明一遍，浪費(fèi)了內(nèi)存

    // 我們再來看一下這個(gè)函數(shù)
    function People(name) {
        this.name = name
        this.sayName = function () {
            console.log(name)
        } // 每個(gè)實(shí)例的sayName方法卻是相同的，而且每出現(xiàn)一個(gè)新實(shí)例，都是新聲明一個(gè)函數(shù)，大大地浪費(fèi)了內(nèi)存
    }

能不能給People的實(shí)例都使用同一個(gè)sayName方法呢

1.3 構(gòu)造函數(shù)&原型&原型鏈 1.3.1 構(gòu)造函數(shù)

任何函數(shù)使用new表達(dá)式就是構(gòu)造函數(shù)，也就是說這個(gè)函數(shù)成為了一個(gè)類

1.3.2 用原型鏈解決重復(fù)創(chuàng)建的問題

每個(gè)對象都會自帶一個(gè)名稱為prototype的屬性

prototype屬性是一個(gè)對象

    // 還是這個(gè)例子
    function People(name) {
        this.name = name
        this.sayName = function () {
            console.log(name)
        } 
    }
    var p1 = new People("sad")
    var p2 = new People("angry")
    
    // People本身就有prototype屬性
    console.log(People.prototype) // {constructor: ?} 

    // 而每個(gè)對象也都會帶有一個(gè)__proto__屬性，指向這個(gè)構(gòu)造函數(shù)【實(shí)例】的類
    // 所有的實(shí)例都共用一個(gè)prototype
    console.log(p1.__proto__ === People.prototype) // true
    console.log(p2.__proto__ === People.prototype) // true

    // 實(shí)例可以通過__prop__訪問到其 類 的prototype屬性，這就意味著類的prototype對象可以作為一個(gè)公共容器，供所有實(shí)例訪問。
    People.prototype.test = "abc"
    console.log(p1.test) // abc

    // p1這個(gè)對象沒有test屬性，但是可以通過它的__proto__屬性訪問到People的prototype屬性

上述關(guān)系我們用一張圖來幫助大家更好地理解

1.3.3 解決內(nèi)存浪費(fèi)問題

由上我們可以知道

所有實(shí)例都會通過原型鏈引用到其類的prototype

prototype相當(dāng)于所有實(shí)例都可以訪問到的一個(gè)公共容器，這個(gè)公共容器也是這些實(shí)例的類的屬性

那么如何解決內(nèi)存浪費(fèi)問題呢？

Answer：重復(fù)的東西移動到公共容器里就可以了

    function People(name) {
        this.name = name // 每個(gè)對象的name屬性時(shí)不同的，這點(diǎn)無可厚非
    }

    People.prototype.sayName = function () {
        console.log(this.name)
    } // 將sayName方法放入People的原型中

    var p1 = new People("sad")
    var p2 = new People("angry")
    console.log(p1.sayName())
    console.log(p2.sayName())