Function.bind(obj, arguments)
说明
1. 简单来说,这个的返回值是一个函数,该函数未执行,该函数中的this指向obj这个对象。
2. 有一些类似apply和call,但是apply和call是在改变this指向对象时,执行函数;
3. 但bind不执行,只单纯改变了this指向的目标;
4. 但有第二、三个甚至更多参数时,参数会依次作为Function的第一、二或更多的参数,在执行函数时,新参数则将被放置在后面;
5. 具体来说,假如原函数test有a, b, c三个参数,在bind绑定结束后,执行该函数test(1, 2, 3)
6. 在只有一个参数的情况下,a、b、c分别对应1,2,3;
7. 假如bind过程中,第二个参数是10,那么a、b、c分别对应10、1、2(注意,此时tset(1,2,3)是没变的)
8. 假如bind过程中,不仅有第二个参数,还有第三个参数20,那么a、b、c分别对应10、20、1
9. 假如bind过程中,甚至还有第四个参数30,那么a、b、c跟1、2、3就没关系了,分别是10、20、30。
兼容性写法
if (!Function.prototype.bind) {
Function.prototype.bind = function () {
var self = this; // 保存原函数
var context = [].shift.call(arguments); // 需要绑定的this上下文,shift表示从数组最前面拿出一个元素
var args = [].slice.call(arguments); // 剩余的参数转成数组,slice方法会返回一个全新的数组(避免数组按引用传递)
return function () { // 返回一个新函数
// 执行新函数时,将传入的上下文context作为新函数的this
// 并且组合concat两次分别传入的参数,作为新函数的参数
// 这里的arguments指的是新函数的参数了(bind结束后调用时,是个数组),而不是bind时的参数
return self.apply(context, [].concat.call(args, [].slice.call(arguments)));
}
};
}
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Function的bind方法</title>
</head>
<body>
<script>
// 兼容性写法
if (!Function.prototype.bind) {
Function.prototype.bind = function () {
var self = this; // 保存原函数
var context = [].shift.call(arguments); // 需要绑定的this上下文,shift表示从数组最前面拿出一个元素
var args = [].slice.call(arguments); // 剩余的参数转成数组,slice方法会返回一个全新的数组(避免数组按引用传递)
return function () { // 返回一个新函数
// 执行新函数时,将传入的上下文context作为新函数的this
// 并且组合concat两次分别传入的参数,作为新函数的参数
// 这里的arguments指的是新函数的参数了(bind结束后调用时,是个数组),而不是bind时的参数
return self.apply(context, [].concat.call(args, [].slice.call(arguments)));
}
};
}
function test(a, b) {
console.log(this);
console.log(a);
console.log(b);
return this.m + a + b;
}
var number = {
m: 1
}
// bind只有一个参数时
var onlyOne = test.bind(number);
console.log(onlyOne(2, 3));
// bind有两个参数时:
var haveTwo = test.bind(number, 2);
console.log(haveTwo(10, 20));
// bind有三个参数时:
var threeArguments = test.bind(number, 2, 3);
console.log(threeArguments(10, 20));
</script>
</body>
</html>
输出结果是:
Object {m: 1} //this指向目标(下同,下略)
2 //第一个参数a
3 //第二个参数b
6 //返回结果this.m + a + b
Object {m: 1}
2 //第一个参数使用bind绑定时的第二个参数
10 //此时第二个参数b是执行函数时的第一个参数
13 //返回结果
Object {m: 1}
2
3
6