JS bind/currying 柯里化

函数扩展bind方法 在ES5开始使用的，也就是ie9一下不支持；
函数扩展bind使用如下：
function() {}.bind(thisArg [, arg1 [, arg2, …]]);
翻译过来就是：
函数.bind(this上下文参数, 普通参数1, 普通参数2, ...);
先看一个简单的

//bind方法
this.x=9;
var module={
  x:81,
  getX:function(){return this.x;}
};

module.getX();
/*
81  使用函数.方法 调用方式 函数内部的属性
*/
var getX=module.getX;
getX(); 
/*
9  将 变量 =函数.方法 使用全局变量 return
*/

var boundGetX = getX.bind(module);
boundGetX();
/*
81  使用bound的方法可以 函数体内属性 具有最高优先级
*/

//bind与currying 柯里化
function add(a,b,c){
  return a+b+c;
}
var func = add.bind(undefined,100);
func(1,2);
/*
103 给第一个参数a 赋值 100  func(1,2)  add(b,c)
*/
var func2= func.bind(undefined,200);
func2(2);
/*
302  给第二个参数b 赋值 200，接第一次bind的a  调用方法时 只需传 一个c的参数
*/

一个具体效果

HTML代码：

<input id="button" type="button" value="点击我" />
<span id="text">我会变色？</span>

JS代码：

//如果当前浏览器不支持bind方法
if (!function() {}.bind) {
    Function.prototype.bind = function(context) {//扩展Function原型链 
        var self = this,
            args = Array.prototype.slice.call(arguments);         
  //因为function(arguments参数为类数组 使用call方法 可以使用数组的操作方法)   
        return function() {
            return self.apply(context, args.slice(1));    
        }
    };
}

var eleBtn = document.getElementById("button"),
    eleText = document.getElementById("text");
    
eleBtn.onclick = function(color) {
    color = color || "#003399";
    this.style.color = color;
}.bind(eleText, "#cd0000");

Paste_Image.png

/*
函数2
 */

if(!function(){}.bind){
  Function.prototype.bind =function(context){
    var self = this,
        args = Array.prototype.slice.call(arguments);
    return function(){
      return self.apply(context,args.slice(1));
    }
  };
}


//bind 与new
 function foo(){
   this.b =100;
   return this.a;
 }
var func = foo.bind({a:1});
func();
/*
1
*/
func1 = new func();//return必须是对象 否则返回this，此时this被初始化一个空对象，对象原型是 foo.prototype;空对象.b属性设置为100，此时返回值return被忽略
func1//返回对象字面量的值
/*
[object Object]  这里必须使用console.log 
*/

//new 可以消除bind 中this的影响
if(!Function.prototype.bind){                    //如果ie9一下不支持bind
  Function.prototype.bind = function(oThis){     //类似上一个例子的 {a:1} 第一个参数
    if(typeof this !=='function'){               //如果全局对象不是函数 抛出异常
      throw new TypeError('What is tring to be bound is not callable');
    }
    var aArgs = Array.prototype.slice.call(arguments,1), //声明变量 变量从参数第一个后开始 使用call 操作类数组arguments
        fToBind = this,
        fNOP = function(){},
        fBound = function(){
          return fToBind.apply(this instanceof fNOP ? this :oThis,aArgs.concat(Array.prototype.slice.call(arguments)));
          //apply(object,args);  如果当前是使用bind时 这里的this在浏览器中就是window对象 this=oThis   返回bind的返回值
          //使用new时 会阻断bind返回 
          
        }
    
   fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
    
  }
}