在專案中我一直做的一件事情就是把方法從其物件中解耦。 map 、 filter 以及 reduce 並非是全部，但是它們肯定是首先獲得自由的。

解耦方法可以讓方法擺脫父物件所施加的限制，同時在表示程式碼的方式上給了我們更多的自由。

那麼這到底是啥玩意呢？

為簡便起見，我們只從 Array 物件中抽取 map 方法。幸運的是 JavaScript 的原型繼承讓這變得很簡單，因為我們想要的功能就在 Array.prototype.map 中。JavaScript 中一個很棒的事情就是我們可以直接呼叫這個方法，只不過要用 .call 來呼叫，因為 map 需要一個 this 引數。

揉進點柯里化，一行程式碼就能搞定。

const map = f => x => Array.prototype.map.call(x, f)

現在我們就可以在沒有 Array 物件的情況下呼叫 map 函數了！

呼叫 map 的替代方式

呼叫 map 的方式有很多種，由於 V8 引擎的優化，這些呼叫方式在效能上其實沒有多大差別。

有點效能上的差異沒多大意義，而且這些數字每次都會變。結論應該是這些方法是差不多的。

解耦如何讓我的生活變得更好？

這個問題很好！可以說是最好的問題。我認為這最好用程式碼來解釋，而不是空談，所以下面我們就直接用程式碼開始好了。

document.querySelectorAll （以及類似的方法）不返回陣列，而是返回一個 NodeList 物件，而 NodeList 物件是不包含 map 方法的。雖然你可以採用一些魔法手段，將 NodeList 轉換為 Array，但是這種轉換是沒有必要的。因為 map 可以遍歷 NodeList，就好像它是一個數組一樣。

const items = document.querySelectorAll('div')

items.map(doSomething)
// => Uncaught TypeError: items.map is not a function

map(doSomething)(items)
// => [<div/>, ..., <div/>]

我們甚至可以 map 一個字串，而不需要先把它轉型為字元陣列。

const value = 'Kitty Cat'

value.map(doSomething)
// => Uncaught TypeError: items.map is not a function

map(doSomething)(value)
// => ['K', 'i', 't', 't', 'y', ' ', 'C', 'a', 't']
 

解耦讓我們可以輕鬆將一個物件對映轉換為一個列表對映：

const getFullName = ({ first, last }) => `${first} ${last}`

getFullName({ first: 'Max', last: 'Power' })
// => 'Max Power'

map(getFullName)([
  { first: 'Max', last: 'Power' },
  { first: 'Disco', last: 'Stu' },
  { first: 'Joe', last: 'Kickass' }
])
// => ['Max Power', 'Disco Stu', 'Joe Kickass']

我們甚至可以對物件進行 map ：

const obj = {
  0: 4,
  1: 5,
  2: 6,
  length: 3
}

map(increase)(obj)
// => [5, 6, 7]

解耦允許我們組合函式：

const mapDoStuff = map(doStuff)
const mapDoSomething = map(doSomething)

// 組合 2 個對映
const mapDoSomethingThenStuff =
  compose(mapDoStuff, mapDoSomething)

解耦（帶柯里化）允許我們偏應用函式引數，建立新函式。

const increaseOne = x => x + 1

// partially applied map increase
const increaseMany = map(increaseOne)

increaseMany([1, 2, 3])
// => [2, 3, 4]

和 this 說再見！！！

const cat = {
  sound: 'meow',
  speak: function() {
    console.log(this.sound)
  }
}

const catSpeak = cat.speak

cat.speak()
// => 'meow'

catSpeak()
// => Uncaught TypeError: Cannot read property 'sound' of undefined

在本例中， cat.speak 執行正常，但是 catSpeak 不行，因為 this 上下文改變了。這太煩了！如果我們把 speak 方法解耦出來，就 再也不用操心 this 了 ！

const cat = { sound: 'meow' }
const speak = ({ sound }) => console.log(sound)

speak(cat)
// => 'meow'

然後我們就可以建立使用解耦過的函式的新函式。

const cat = { sound: 'meow' }
const speak = ({ sound }) => console.log(sound)
const speakLoudly = obj =>
  speak({ ...obj, sound: obj.sound.toUpperCase() + '!' })

speak(cat)
// => 'meow'

speakLoudly(cat)
// => 'MEOW!'

總結

本文學習瞭解耦方法並將其從物件中抽取出來的很多好處。解耦讓我們可以把函式用在更多地方以及不同型別的物件上，同時讓它可以與其它函式組合。我們還消除掉了所有對 this 上下文的引用，光這一項對我來說就足夠了！