Javascript中bind实现

MDN中bind是这样定义的：
bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。

由此我们可以看出bind 函数的两个特点：
1. 绑定this，返回一个新函数，便于稍后调用；
2. 可以传入参数 (可以预传参，只需要传入剩下的参数)

看个bind应用的例子：

var person = {    name: 'nuan'}function sayName(prefix, suffix){    console.log(prefix + this.name + suffix)  // Hello, nuan???}var newSayName = sayName.bind(person,'Hello, ')newSayName('???')

下面从bind函数的两个特点进行实现：

为了满足第一个返回一个新函数的特点，下面是个简化版的bind实现：

Function.prototype.bind = function(context){    var self = this;    //保存原函数    return function(){      //返回一个新的函数        return self.apply(context, arguments);      //执行新的函数的时候，会把之前传入的context当做新函数体内的this    }}var obj = {    name: 'sven'}var func = function(){    console.log(this.name);    //sven}.bind(obj);func();   

为了满足第二个bind函数可以预传参，只需要传入剩下的参数的特点，最终实现如下：

Function.prototype.bind = function () {  var self = this, //保存原函数      context = [].shift.call(arguments), //需要绑定的this上下文      args = [].slice.call(arguments); //剩余的参数转为数组  return function(){ //返回一个新的函数      return self.apply(context, [].concat.call(args, [].slice.call(arguments)));      //执行新的函数的时候，会把之前传入的context当做新函数体内的this      //并且组合两次分别传入的参数，作为新函数的参数  }}var obj = {  name: 'sven'}var func = function(a, b, c, d) {  console.log(this.name);       //sven  console.log([a, b, c, d]);    //[1, 2, 3, 4]}.bind(obj, 1, 2);func(3, 4); 

参考阅读

1. JavaScript设计模式与开发实践–曾探著
2. bind
3. bind函数的实现