js bind 函数 使用闭包保存执行上下文

js中bind函数是一个非常常用的函数，它可以改变函数的上下文(this)，常常用于一些特殊情况，如在事件处理函数中改变this指向。在使用bind函数的时候，为了保证绑定的上下文在函数执行时正确，使用闭包保存执行上下文是一个非常好的选择，本攻略将详细讲解如何使用闭包保存执行上下文。

什么是bind函数？

bind函数是js中常用的一个函数，可以修改函数的上下文(this)。bind函数会返回一个新的函数，这个新的函数将使用给定的this值以及调用bind()时提供的一组参数。

示例代码如下：

var foo = {
  x: 3,
  getX: function() {
    return this.x;
  }
};

var getX = foo.getX;
getX(); // undefined

var boundGetX = getX.bind(foo);
boundGetX(); // 3

在这个例子中，我们定义了一个对象foo，这个对象有一个属性x和一个方法getX，getX返回对象的属性x。通过getX方法，我们可以获取到对象foo的属性值。但是当我们使用var getX = foo.getX;这种方式将方法赋值给一个变量后，方法中this指向的就不再是foo对象了，而是全局对象window，这样将会导致我们无法获取到对象foo的属性x。为了解决这个问题，我们可以使用bind函数将this绑定到对象foo上，实现代码为var boundGetX = getX.bind(foo);，绑定后，boundGetX()将会返回对象foo的属性x。

使用闭包保存执行上下文

在使用bind函数时，为了在函数执行时正确获取到this指向，我们经常会使用一个构造函数来实现这个过程。这个构造函数将this指向绑定对象的一个变量中，并返回一个新的函数，这个新的函数使用闭包保存了this指向变量的值，达到了保存执行上下文的目的。示例代码如下：

function bind(fn, ctx) {
  return function() {
    fn.apply(ctx, arguments);
  };
}

var obj = {name: 'Amy'};

function printName() {
  console.log(this.name);
}

var boundPrintName = bind(printName, obj);
boundPrintName(); // Amy

在这个例子中，我们定义一个bind函数，这个函数接收两个参数fn和ctx，分别表示要绑定的函数和要绑定的上下文。然后bind函数返回一个新的函数，这个函数使用闭包保存了ctx的值，并在执行时使用apply方法将fn的执行上下文改为ctx。最后我们使用这个新的函数boundPrintName来输出对象obj的一个属性name。

示例2

我们来看一个更复杂的例子。

function Person(name, age) {
  this.name = name;
  this.age = age;

  this.sayName = function() {
    console.log(this.name);
  }
}

var p1 = new Person('Tom', 20);

var button = document.getElementById('button');
button.addEventListener('click', p1.sayName.bind(p1));

在这个例子中，我们定义了一个构造函数Person，这个函数接收两个参数name和age，分别表示人名和年龄。然后，在构造函数中，我们为构造出来的对象添加了一个方法sayName，这个方法的作用是输出对象的名字。随后我们创建了一个p1对象，使用实例化的方式来使用Person这个构造函数。最后，我们获取页面上的一个按钮，为这个按钮添加了一个点击事件处理函数，我们将p1.sayName函数的执行上下文绑定在了p1对象上。这样在我们点击按钮时，就能够正确地输出p1的名字了。

总结

在js编程中，bind函数是一个非常有用的函数，可以用来绑定函数的执行上下文。使用闭包保存执行上下文可以让我们在使用bind函数时更加安全地获取到函数的执行上下文，同时也可以起到保护原始执行上下文的作用。在编写js代码时，我们应该时刻保持代码的可读性和易于维护性，使用闭包保存执行上下文可以使代码更容易理解和维护。