把玩Javascript中的bind

2022-07-21 20:32:48

前言

今天闲着无聊随便逛了逛MDN，忽而看到一个方法Function.prototype.bind(),突然发现除了使用这个方法之外都没有仔细琢磨过这个方法。于是乎，找到了kill time的事情-写博客。

基础知识简介

随便看看资料发现这玩意其实不简单，理解起来需要不少基础知识，在这里罗列一些，也算是一个总结和复习。

函数

下面这段话来自《JavaScript语言精粹》，名副其实地描述了函数的精髓。

调用一个函数会暂停当前函数的执行，传递控制权和参数给新函数。除了声明时定义的形式参数，每个函数还接收两个附加的参数：this和arguments。参数this在面向对象编程中非常重要，他的值取决于调用的模式。在JavaScript里面一共有四种调用模式：方法调用模式、函数调用模式、构造器调用模式和apply调用模式。这些模式在如何初始化关键参数this上面存在差异。

方法调用模式

当一个函数被保存为对象的一个属性时，我们称它为一个方法。当一个方法被调用的时候，this被绑定到该对象。

var info = {

    name: 'yuanzm',

    sayName: function() {

        console.log(this.name);

    }

}

info.sayName();    //yuanzm

函数调用模式

当一个函数并非为一个对象的属性的时候，他就是被当做一个函数来调用的。此模式调用函数的时候，this被绑定到全局对象。这是语言设计上的一个错误。倘若语言设计正确，this应该是绑定到外部函数的this变量。

var name = "yuanzm"

var sayName = function() {

    console.log(this.name);

}

sayName();// yuanzm

构造器调用模式

如果在一个函数前面带上new来调用，那么背地里将会创建一个连接到该函数的prototype成员的新对象，同时this会被绑定到新对象上。（JavaScript原型相关知识这里不做赘述）

function Info(name) {

    this.name = name;

}

Info.prototype.sayName = function() {

    console.log(this.name);

}

var info = new Info('yuanzm');

info.sayName();//yuanzm

Apply调用模式

根据MDN的定义

The apply() method calls a function with a given this value and arguments provided as an array (or an array-like object).

var numbers = [5, 6, 2, 3, 7];

var max = Math.max.apply(null, numbers);

类数组

一个类数组被定义为：

具有：指向对象元素的数字索引下标以及 length 属性告诉我们对象的元素个数
不具有：诸如 push 、 forEach 以及 indexOf 等数组对象具有的方法

符合上述定义的类数组是长下面这样子的：

var my_object = {

    '0': 'zero',

    '1': 'one',

    '2': 'two',

    '3': 'three',

    '4': 'four',

    length: 5

};

前面提到的arguments也是类数组。很多时候，处理类数组最省事的方法就是将它转化成数组。那么就涉及到一个非常有意思的话题：将类数组转换成数组。

将类数组转换成数组非常简单，调用Array自带的方法即可：

Array.prototype.slice.call(arguments);

其中call换成apply也是一样的。

简单解释一下，slice方法常规的调用方式为array.slice(start, end),会对array中的一段做浅复制，首先复制array[start], 一直复制到array[end]。前面提到过apply（或call）会切换一个函数调用的上下文，也就是Array.prototype.slice.call(arguments);手动绑定了需要操作的array为arguments，由于arguments和数组一样具有下标，所以这个方法也是可行的，因而产生了一个新的数组，这个数组具有普通数组的所有方法，同时具有arguments每一个下标对应的值。

bind

简介

前面说了这么多，主角终于登场了！不过为了凸显它的作用，还是需要抛出一段达不到我们需求的代码。

var name = 'yuan'

var info = {

    name: "yuanzm",

    sayName: function() {

        console.log(this.name);

    }

}

var sayName = info.sayName;

// 我们本身是希望得到yuanzm的，但是确得到了yuan这个结果。为什么会得到这个结果，前面的长篇大论起作用了。

// 如果是采用info.sayName()这种调用方式，符合函数的方法调用模式，函数内部的this是info对象；

// 如果令一个变量sayName为info.sayName，这个时候再调用函数，就是普通的函数调用模式了，结果自然为yuan。

sayName();    // yuan

那么我们使用bind就是希望最后得到的结果为yuanzm。

现在我们可以好好介绍bind了。根据MDN的定义：

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

翻译过来就是，bind()方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

他的语法是：

fun.bind(thisArg[, arg1[, arg2[, ...]]]);

解决问题

有了bind，上述问题我们就能够得到想要的结果了：

var name = 'yuan'

var info = {

    name: "yuanzm",

    sayName: function() {

        console.log(this.name);

    }

}

var sayName = info.sayName.bind(info);

sayName();    // yuanzm

bind的用法在MDN上面描述得很详细，本文的目的也不是为了照搬MDN，所以这里有关bind使用的部分就到这儿，接下来我们去看看Javascript库中bind的实现

Prototype中的bind

很久之前Prototype的bind写法是下面这样的(注释为本人所加)：

Function.prototype.bind = function(){

	// bind作为Function的prototype属性，每一个函数都具有bind方法，其中的this指向调用该方法的函数(也即一个函数对象实例)

  	var fn = this;

  	// 前面说过，这个方法是为了将类数组转换成数组

  	var args = Array.prototype.slice.call(arguments);

  	// 数组的shift方法会移除数组的第一个元素，在bind方法的参数里面，第一个参数就是需要绑定this的对象

  	var object = args.shift();

  	return function(){

    	return fn.apply(object,

    	// 现在的args是移除了最初参数中第一个参数后的数组，也就是新函数的预设的初始参数。

    	// array.concat(items...)方法产生一个新数组，它包含一份array的浅复制，并把一个或者多个参数item附加在其后。

    	// 如果参数item是一个数组，那么它的元素会被分别添加。

    	// 于是这一行代码产生了一个参数数组，这个数组由预设的初始参数(如果存在)和新传递的参数组成。

      	args.concat(Array.prototype.slice.call(arguments)));

  	};

};

在最新的版本1.7.2(2015.06.23查阅官网)中https://github.com/sstephenson/prototype/blob/master/src/prototype/lang/function.js#L115，bind是下面这样子的：

function bind(context) {

	if (arguments.length < 2 && Object.isUndefined(arguments[0]))

  		return this;

	if (!Object.isFunction(this))

  		throw new TypeError("The object is not callable.");

	var nop = function() {};

	var __method = this, args = slice.call(arguments, 1);

	var bound = function() {

  		var a = merge(args, arguments);

  		// Ignore the supplied context when the bound function is called with

  		// the "new" keyword.

  		var c = this instanceof bound ? this : context;

  		return __method.apply(c, a);

	};

	nop.prototype   = this.prototype;

	bound.prototype = new nop();

	return bound;

}

可见，除了加了一些异常情况判断，核心代码和之前并无大差别。

结语

总得来说apply、call和bind都是为了手动绑定this对象，目的上没有什么区别。但是bind和另外两者的明显的区别是，bind会产生一个新的函数，这个函数还可以有预设的参数，这在很多时候会比apply和call更加好用。合理利用apply、call和bind会使得javaScript代码更加优雅。

参考资料

Function.prototype.apply()

JavaScript 的怪癖 8：“类数组对象”

how does Array.prototype.slice.call() work?

JavaScript’s Apply, Call, and Bind Methods are Essential for JavaScript Professionals

码农公寓

前言