ES5新增函数之二: Function.prototype.bind();

Bertha 。 2022-07-28 04:25 171阅读 0赞

在上一篇文章里我们分析了ES5对几个常用类新增的函数，今天就重点来讲解一下Function中的bind函数。

简单来说，bind函数用于将当前函数和指定对象绑定，返回一个新的函数，当新函数被调用时，代码会在指定对象的上下文中执行。

这就涉及到JavaScript程序执行上下文Context的知识了，在JavaScript中函数内部如果存在与Context有关的代码，如果我们在调用之前改变其Context，那么执行结果就不同，这一点我们可以用一个最基本的例子来说明：

如上所示，我们在全局声明一个name变量，然后声明student和person对象，分别都有name属性，其中person包含一个getName函数，用于返回所在对象的name属性。第一步我们直接调用person的getName函数，返回Scott；然后我们先去到person的getName函数引用，之后直接调用，注意，这次调用跟第一步是不同的，它的执行环境是全局，所以函数内部的this.name会指向我们全局声明的name，所以结果会返回Global；最后我们使用call方法将getName函数在student对象的上下文中执行，结果会返回student的name属性，即John。

针对这个问题，我们可以使用bind函数将getName绑定person对象，返回一个带有固定作用域的新函数，以后不管在哪调用这个新函数，都不用担心作用域的问题：

var getName = person.getName.bind(person);  //使用bind函数绑定person对象
    console.log(getName());               //Scott
    console.log(getName.call(student));   //Scott

注意最后一个调用虽然使用了call函数，但因为getName使用bind绑定了person对象，所以不会再被call函数更改作用域了，打印结果仍然会是person对象的name。

另外一个例子是调用setTimeout或setInterval，当我们在函数内部调用setTimeout时需要特别小心，因为setTimeout函数是在全局Context中执行的，我们来看下面这段代码及运行的结果：

![20160402154314717][]

我们本希望在调用showMyName后延时1秒然后打印person的name属性，可是结果并不是如我们期望的那样，而是打印出了全局变量的值John，这是因为setTimeout把person的printName函数放到了全局执行了，那printName里面的this自然也指向了全局中的name变量。对于这个问题我们同样可以使用bind函数将作用域绑定为person对象，进而将printName的this总是指向person对象：

setTimeout(this.printName.bind(this), 1000);   //使用bind绑定当前对象person

这样一来结果就会如我们期望打印出person的name属性，即Scott了：

![20160402154442608][]

上面介绍了这么多，想必大家已经对bind的作用有所了解了，下面来详细介绍一下bind函数的签名：

**func.bind(context, \[arg1, \[arg2, \[...\]\]\]);**

函数的第一个参数是执行环境的上下文对象，后面的参数列表是预设参数，我们知道，调用bind函数会返回一个新函数，当这个新函数调用时，上面参数列表里的预设函数也会附带作为实参传入。在上面两个例子中我们使用bind函数时并没有预设参数，下面我们举个例子来说明一下如何使用预设参数：

var listDrinks = function() {
      var drinks = Array.prototype.slice.call(arguments);
      console.log(drinks.join(', '));
    };
    
    listDrinks('tea', 'coffee');  //tea, coffee
    
    var listDrinksOfRestaurant = listDrinks.bind(null, 'this restaurant serves: water');
    
    listDrinksOfRestaurant('tea', 'coffee', 'milk');  //this restaurant serves: water, tea, coffee, milk

打印结果如下：

![20160402170002965][]

上面的例子很简单，listDrinks函数用于列出所有的饮料，然后我们使用bind函数返回了一个新的函数listDrinksOfRestaurant，它专门用于列出一个餐馆提供的所有饮料，因为每个餐馆都得提供水，所以这是一个基本的要求，我们就把它作为预设参数在bind时传递进去，这样不管listDrinksOfRestaurant如何调用，water会一直存在的。另外，我们注意到上面使用bind函数时第一个参数是null，这是因为我们的listDrinks函数内部没有任何与上下文有关的代码，所以不需要传递上下文对象即可。

bind函数在ES5规范中是一个很重要的特性，给开发者带来了极大的便利，但它在低版本的浏览器中是无法使用的，所以我们很有必要实现我们自己的bind函数：

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

以上就是bind函数的全部内容，因为它涉及到一些作用域的概念及运行机制，所以需要细细体会，了解其中的奥妙之处，谢谢大家。

[20160402154314717]: /images/20220727/20f007af0e234672b65450e62678666c.png
[20160402154442608]: /images/20220727/e151da205a8d4c0b8be3f555dfe04c33.png
[20160402170002965]: /images/20220727/2eac1219ff0c42d982f66aef411e9e8e.png