JavaScript 之 Object.apply()与Object.call()和Object.bind()
JavaScript 之 Object.apply()与Object.call()和Object.bind()
1. apply()
apply()调用一个方法，其具有一个指定的this 值，以及作为一个数组（或类似于数组的参数）。
注意：apply()和call()方法的作用很类似，只有一个区别，那就是call()方法接受的是若干个参数的列表，而apply()接受的是包含多个参数的数组。 apply可以用来“展开”一个数组。
语法
fun.apply(thisArg, [argsArray])
参数
- thisArg
在 fun 函数运行时指定的 this值。需要注意的是，指定的 this值并不一定是该函数执行时真正的 this值，如果这个函数处于非严格模式下，则指定为 null或 undefined 时会自动指向全局对象（浏览器中就是window对象），同时值为原始值（数字，字符串，布尔值）的 this会指向该原始值的自动包装对象。
- argsArray
一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 fun函数。如果该参数的值为null 或 undefined ，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。浏览器兼容性请参阅本文底部内容。
实例
function add(x,y) {return x+y;}
function mul(x,y) {return x * y;}
> add.apply(mul, [5,6]); // mul调用add的方法来执行
< 11
> add.call(mul, 5,6); // mul调用add的方法来执行
< 112. call()
call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。
语法
fun.call(thisArg[, arg1[, arg2[, ...]]])
参数
- thisArg
在fun函数运行时指定的this值。 需要注意的是，指定的this值并不一定是该函数执行时真正的this 值，如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向 全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。
- arg1, arg2, ...
指定的参数列表。
3. bind()
bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。
语法
fun.bind(thisArg[, arg1[, arg2[, ...]]])
参数
- thisArg
当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。当使用new操作符调用绑定函数时，该参数无效。
- arg1, arg2, ...
当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法。
返回值
返回由指定的this值和初始化参数改造的原函数拷贝
描述
bind() 函数会创建一个新函数（称为绑定函数），新函数与被调函数（绑定函数的目标函数）具有相同的函数体（在 ECMAScript 5 规范中内置的call属性）。当目标函数被调用时 this 值绑定到 bind() 的第一个参数，该参数不能被重写。
绑定函数被调用时，bind() 也接受<u>预设的参数提供给原函数</u>。一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。
例子
del = {a: 3, get: function(x){return x - this.a}}
> var del3 = del.get.bind(del); // 产生一个新的函数
> del3(5)
< 2
> del3(8)
< 5
var del6 = del.get.bind({a: 6}, 5); // 有预设参数的新的函数
> del6()
< -1var numbers = [2,3,4,5,6,7,8];
var max = Math.max.call(this, 2,3,4,5,6,7,8);
var min = Math.min.apply(this, numbers);
console.log(`max=${max}`);
console.log(`min=${min}`);柯里化
bind(...)可以对参数进行柯里化。
结合犀牛书中bind()方法实现， 是说把bind()方法第一个参数以后的所有参数作为返回函数的起始实参）首先bind不同于call和apply只是单纯地设置this的值后传参，它还会将所有传入bind()方法中的实参（第一个参数之后的参数）与this一起绑定。
var sum = function(x,y) { return x + y };
var succ = sum.bind(null, 1); //让this指向null，其后的实参也会作为实参传入被绑定的函数sum
succ(2) // => 3: 可以看到1绑定到了sum函数中的x注意
当bind()所返回的函数用作构造函数的时候， 传入bind()的this将被忽略，实参会全部传入原函数，这样说很抽象， 举个栗子?
function original(x){
this.a=1;
this.b =function(){return this.a + x}
}
var obj={
a:10
}
var newObj = new (original.bind(obj,2)) //传入了一个实参2
console.log(newObj.a) //输出 1, 说明返回的函数用作构造函数时obj(this的值)被忽略了
console.log(newObj.b()) //输出3 ，说明传入的实参2传入了原函数original写在后面
GitHub上集大家之力搞了一个前端面试题的项目，里面都是大家面试时所遇到的题以及一些学习资料，有兴趣的话可以关注一下。如果你也有兴趣加入我们的话，请在项目中留言。项目同时也可以在gitbook上查看。