JavaScript Function bind

JavaScript bind 函数允许返回一个跟源函数一样的绑定函数。绑定函数与源函数区别在与绑定函数的 this 已经被 bind 修改。

函数定义

new Function().bind(this, arg0, arg1…)

代码示例

function sayHello(guest) {
	console.log('Hello ' + guest + ', I am ' + this.age + ' years old');
}
sayHello('Yue');

var me = {
	name: 'Seven',
	age: '24'
};

var sayHi = sayHello.bind(me);
sayHi('Yue');

执行结果

JavaScript bind

尽管没有通过调用成员方法而是直接执行函数 sayHi(‘Yue’),sayHi 内部的 this 仍然指向了对象 me,而不是默认的 window。

从控制台可以看到 sayHi 已经被“编译”为本地方法。

bind 函数的可选参数 arg0、arg1 等是绑定到源函数对应的第0个参数、第一个参数。执行绑定函数时自动传递已绑定的参数。

与 bind 相比,apply 和 call 方法是在函数执行时改变 this,bind 可以理解为在函数定义时改变 this。

apply、bind、call 对比

函数名 参数列表 说明
apply (this_arg, arguments_array) 调用函数,通过 this_arg 替代源函数默认的 this,arguments_array 是传递给函数的参数列表
var A = {
	name: 'A',
	sayHi: function(guest) {
		console.log('Hi ' + guest + ', I am ' + this.name);
	}
}
var me = {name: 'Seven'};
A.sayHi('Yue');
A.sayHi.apply(me, ['Yue']);
bind (this_arg, arg0, arg1…) 创建与源函数函数体一样的绑定函数,并根据 this_arg 和 arg0、arg1 等分别修改绑定函数的 this 和 默认参数
call (this_arg, arg0, arg1…) 调用函数,通过 this_arg 替代源函数默认的 this,arg0、arg1 等是传递给函数的参数列表
var A = {
	name: 'A',
	sayHi: function(guest) {
		console.log('Hi ' + guest + ', I am ' + this.name);
	}
}
var me = {name: 'Seven'};
A.sayHi('Yue');
A.sayHi.call(me, 'Yue');