技術標籤：jsjs

實現 (5).add(3).minus(2)，輸出結果為 6

這個其實就是讓我們給 Number 新增2個方法 ，分別為 add 和 minus ，然後我們呼叫這2個方法，和我們的 數值相加減，輸出為 6；

英語翻譯 add 為 加， minus 為 減；那就是為 5 + 3 - 2 = 6 咯！

首先要明白一點，就是原型鏈的查詢機制；

我們的所有資料的基類都是 Object 物件；你可以輸出

console.log(new String())

然後一直看輸出的資料中的 __propo__ 他一直指向到 object 才停止；其他型別也一樣 Array ，Function

舉一個例子：

let arr = [1,2,3]

他是一個數組；我們都知道他可以使用陣列的所有方法，如 push， pop ，slice 等方法；

這個是因為他是 陣列類 的例項，他可以通過 __propo__ 找到 陣列類的原型（ Array.prototype ），從而尋找到 陣列類 上面的方法；這個尋找機制就是原型鏈，所以呢！

我們的數字 5 ，是數字類的 例項；那我們可以給 數字類的原型上，新增上面的2個方法，不就可以了嗎

實現，以下是實現的過程：

題目：實現 (5).add(3).minus(2) 使其輸出 6

分析：

5 是一個數字，所以他是 Number 類的一個例項

console.log(typeof 5)  // number

我們可以把執行操作寫在 立即執行函式 中

(function() {
    Number.prototype.add = function() {
        console.log('給數字類的原型 上新增add方法')
    },
        
    Number.prototype.minus = function() {
         console.log('給數字類的原型 上新增minus方法')
    }
})();

// 呼叫我們剛剛新增的 add 方法
(5).add()  //=> '給數字類的原型 上新增add方法'
 

這樣證明我們在 原型上新增的方法，是可行的 。

為什麼要在 5 的外面包裹一層 括號 呢？

自己：5.add 雖然 5 是數字類的例項，但是呢！ 我們的 變數/函式 是不能以 數字開頭的，所以要新增一個括號 。

那我們原型上的方法中，要如何得到 5 這個值，如何和我們傳入的值進行 加減 呢？

自己：在函式中使用 this 可以得到我們的例項，在 this 的指向中，有一條是，函式中的 this 指向例項（點之前的值），所以就可以使用 this 得到我們的 5 。

我們的方法要接收引數：

(function() {
    Number.prototype.add = function(x) {
        return this + x
    }
    
    Number.prototype.minus = function(x) {
        return this - x
    }
})();

console.log((5).add(12).minus(1)) // 16

優化程式碼：

判斷傳入的引數是否為 數字 和 進行預設型別的轉換：

(function() {
    // 使用 isNaN 來判斷引數是否為 數字型別
    // 如果不是數字，就為 零 ；
    // 減 0 就是進行預設型別轉換
    function check(x) {
        return x = isNaN(x) ? 0 : x - 0
    }
    
    Number.prototype.add = function(x) {
        x = check(x)
        return this + x
    }
    
    Number.prototype.minus = function(x) {
        x = check(x)
        return this - x
    }
})();

console.log((5).add('12').minus('1')) // 16

讓程式好看點：

(function() {
    function check(x) {
       return x = isNaN(x) ? 0 : x - 0
    }

    function add (x) {
    	 x = check(x)
       return this + x
    }

    function minus (x) {
    	 x = check(x)
       return this - x
    }
    
    Number.prototype.add = add

    Number.prototype.minus = minus
    
    // 不能怎麼賦值，這樣是 把執行後的值，賦給 原型上的 add ，記住不能；
    // Number.prototype.add = add()
       
})();

console.log((5).add('12').minus('1')) // 16
console.log((5).add(2))  // 7
console.log((5).add('wqeqwe').minus('1')) // 4
console.log(new Number)

參考視訊 點我哦 ！