JS中bind方法與函數(shù)柯里化

wua_wua2012 發(fā)布于2019-08-21 10:45 / 1331人閱讀

摘要：手賤搜了下函數(shù)柯里化，結(jié)果搜出騰訊的一篇反柯里化的文章中有趣的反柯里化技術(shù)，又犧牲不少腦細(xì)胞，趕緊吃飯，餓死了

原生bind方法

不同于jQuery中的bind方法只是簡單的綁定事件函數(shù)，原生js中bind()方法略復(fù)雜，該方法上在ES5中被引入，大概就是IE9＋等現(xiàn)代瀏覽器都支持了（有關(guān)ES5各項特性的支持情況戳這里ECMAScript 5 compatibility table），權(quán)威指南上提到在ES3中利用apply模擬該方法的實現(xiàn)（JS權(quán)威指南中函數(shù)那章），但無法真實還原該方法，這也是真bind方法中的有趣特性。

首先bind不同于call和apply只是單純地設(shè)置this的值后傳參，它還會將所有傳入bind()方法中的實參（第一個參數(shù)之后的參數(shù)）與this一起綁定，我個人的理解是其后的參數(shù)也會作為綁定上下文的一部分，以下為《js權(quán)威指南》原文的說法：

The ECMAScript 5 bind() method does more than just bind a function to an object. It also performs partial application: any arguments you pass to bind() after the first are bound along with the this value.

關(guān)于這個特性看《權(quán)威指南》原文的栗子：

var sum = function(x,y) { return x + y }; 

var succ = sum.bind(null, 1); //讓this指向null，其后的實參也會作為實參傳入被綁定的函數(shù)sum

succ(2) // => 3:  可以看到1綁定到了sum函數(shù)中的x

其次， bind()方法所返回的函數(shù)的length（形參數(shù)量）等于原函數(shù)的形參數(shù)量減去傳入bind()方法中的實參數(shù)量（第一個參數(shù)以后的所有參數(shù)），因為傳入bind中的實參都會綁定到原函數(shù)的形參，嗎的，繞死了，舉個栗子：

function  func(a,b,c,d){...} //func的length為4

var after = func.bind(null,1,2)  //這里輸入了兩個實參（1，2）綁定到了func函數(shù)的a，b

console.log(after.length) //after的length為 2

第三，當(dāng)bind()所返回的函數(shù)用作構(gòu)造函數(shù)的時候，傳入bind()的this將被忽略，實參會全部傳入原函數(shù)，這樣說很抽象，舉個栗子?

function original(x){
  this.a=1;
  this.b =function(){return this.a + x}
}
var obj={
  a:10
}
var  newObj = new (original.bind(obj,2)) //傳入了一個實參2
console.log(newObj.a)  //輸出 1, 說明返回的函數(shù)用作構(gòu)造函數(shù)時obj(this的值)被忽略了

console.log(newObj.b()) //輸出3 ，說明傳入的實參2傳入了原函數(shù)original

函數(shù)柯里話的概念

以上就是ES5中bind方法的特性，這種技術(shù)也被稱為函數(shù)柯里化，在看《js權(quán)威指南》的時候感覺這玩意逼格太高直接忽略了，最近又碰到這概念，索性打算搞定他。
函數(shù)柯里化在百科的解釋為：

在計算機科學(xué)中，柯里化（Currying）是把接受多個參數(shù)的函數(shù)變換成接受一個單一參數(shù)(最初函數(shù)的第一個參數(shù))的函數(shù)，并且返回接受余下的參數(shù)且返回結(jié)果的新函數(shù)的技術(shù)。這個技術(shù)由 Christopher Strachey 以邏輯學(xué)家 Haskell Curry 命名的，盡管它是 Moses Schnfinkel 和 Gottlob Frege 發(fā)明的。

以上翻譯成人話就是：這種技術(shù)將多個參數(shù)的函數(shù)變成只帶一個參數(shù)的函數(shù)。bind方法就是該技術(shù)在js中的實踐。作為一個菜鳥，目前只用過bind設(shè)置this的值，碼這篇博客的目的就是厘清下bind的特性。

手賤搜了下函數(shù)柯里化，結(jié)果搜出騰訊的一篇反柯里化的文章（Javascript中有趣的反柯里化技術(shù)），又犧牲不少腦細(xì)胞，趕緊吃飯，餓死了～～～～