1.call/apply和bind概览
- 我们要将call/apply归为一类，bind单独归为一类
- 三者的共同点是都可以指定this
- call/apply和bind都是绑定在Function的原型上的，所以Function的实例都可以调用这三个方法
Function.prototype.call(this,arg1,arg2)
Function.prototype.apply(this,[arg1,arg2])
Function.prototype.bind(this,arg1,arg2)至于为什么，看完这篇文章你就懂了：）
如果你不懂什么是实例的话，请移步 深入浅出面向对象和原型【概念篇1】、 深入浅出面向对象和原型【概念篇2】
2. call / apply —— 第一个参数是this（上下文）
2.1 作用和返回值
作用
- 调用函数
- 改变该函数this值
- 操作参数
返回值
返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined。
window.a = 1
function print(b, c) {
console.log(this.a, b, c)
}
print(2, 3) // 1 2 3
print.call({a: -1}, -2, -3) // -1 -2 -3
print.apply({a: 0}, [-2, -3]) // 0 -2 -3call()方法的作用和 apply() 方法是一样的，只有一个区别
call()方法接受的是若干个参数
apply()方法接受的是一个包含若干个参数的数组
2.2 apply传递数组的应用
// 例子一
// Math.max()不接收数组的传递，我们可以使用apply方法
let answer = Math.max.apply(null, [2, 4, 3])
console.log(answer) // 4
// 注意下面三个等价
Math.max.apply(null, [2, 4, 3])
Math.max.call(null, 2, 4, 3)
Math.max(2, 4, 3) // 例子二
// 合并两个数组
let arr1 = ['parsnip', 'potato']
let arr2 = ['celery', 'beetroot']
// 将第二个数组融合进第一个数组
// 相当于 arr1.push('celery', 'beetroot');
Array.prototype.push.apply(arr1, arr2)
// 注意！！！this的意思是谁调用了push这个方法
// 所以当 this = arr1 后
// 就成了 arr1 调用了 push方法
// 所以上述表达式等价于 arr1.push('celery', 'beetroot')
console.log(arr1)
// ['parsnip', 'potato', 'celery', 'beetroot']例子二中非常值得注意的就是arr2数组被拆开了，成了一个一个的参数
所以，apply经常性的作用之一就是
将数组元素迭代为函数参数
// 例子三
Math.max.apply(null, [2, 4, 3]) // 完美运行
arr1.push.apply(null, arr2) // 报错 Uncaught TypeError: Array.prototype.push called on null or undefined
// 说明
Math = {
max: function (values) {
// 没用到this值
}
}
Array.prototype.push = function (items) {
// this -> 调用push方法的数组本身
// this为null的话，就是向null里push
// Array.prototype.push called on null or undefined
}
// 下面三个值是完全等价的，因为this值已经是arr1
Array.prototype.push.apply(arr1, arr2)
arr1.push.apply(arr1, arr2)
arr2.push.apply(arr1, arr2)2.3 小测试
function xx() {
console.log(this)
}
xx.call('1') // ??
xx() // ??如果答案和你想的不一样，请移步 this总结【1】—— this概览
3.bind
fun.bind(thisArg[, arg1[, arg2[, ...]]])3.1作用
- 改变this
- 返回一个新函数
3.2 绑定函数、目标函数
实例使用bind()方法后会返回一个新的函数【绑定函数】
而原函数为【目标函数】
我个人更喜欢用 新函数和 原函数来区分，因为新名词越多，理解上的困难越大
那么新函数被调用时会发生什么呢？
下面一句话务必记住
其实就是把原函数call/apply一下，并指定你传递的this
function xx() {
console.log(this)
}
let foo = xx.bind({'name':'jason'})
// foo —— 新函数【绑定函数】
// xx —— 原函数【目标函数】
foo()
// 新函数调用时对原函数的操作
// 下面是伪代码
// function foo(){
// xx.call({'name':'jason'})
// }
// 1.给xx（原函数）指定this 2.调用xx（原函数）
// 一定要注意这两步是在新函数被调用时才发生，不调用不发生
// 你也可以总结为一句话，给原函数 call/apply 了一下3.3 bind()传参和新函数【绑定函数】传参
- bind(this,arg1)会将arg1插入到原函数【目标函数】的参数列表的开始位置
- 传递给新函数【绑定函数】的参数会跟在它们的后面
function list() {
// 原函数【目标函数】
return Array.prototype.slice.call(arguments);
}
let listTest = list(1, 2, 3); // [1, 2, 3]
// 新函数【绑定函数】
let leadingThirtysevenList = list.bind(undefined, 37);
let list1 = leadingThirtysevenList(); // [37]
let list2 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]3.3 原生实现一个bind，使用 this + call/apply【重点】
思考过程
// 实现bind其实就是实现bind的特点
// 1.bind的第一个参数是this
// 2.bind可以return一个新函数，这个新函数可以调用原函数并且可以指定其this，还可以接受参数
// 3.bind返回的新函数传递的参数要在bind传递的参数的后面代码
Function.prototype._bind = function () {
// 声明bind接受的参数【除去this】为bindArgs
// 因为第一个参数是this，需要去掉
let bindArgs = Array.prototype.slice.call(arguments, 1)
let bindThis = arguments[1]
// 声明原函数【目标函数】为targetObj
let targetObj = this
return function () {
// return出来的的函数接受的参数为newArgs
// 要在return出来的新函数里把bindArgs和newArgs合并，使用数组的concat方法
let newArgs = Array.prototype.slice.call(arguments)
return targetObj.apply(bindThis, bindArgs.concat(newArgs))
}
}4. 既然都是指定this，为什么已经有call/apply，又要有bind呢？
4.1 你从未关注过函数的返回值
你在控制台输入console.log(1)为什么一个是1，一个是undefined？
1是执行console.log()方法的输出值，undefined是这个方法的返回值
所以，你要知道所有的函数都有返回值，一定要去关注一下函数的返回值4.2 call/apply 与 bind 的返回值
xxx.call()/xxx.apply() 的返回值是由xxx本身的返回值决定的
xxx.bind() 的返回值是一个函数