修改this指向的三种方式

call

function.call(this指向谁，参数1，参数2…)调用函数，并修改函数中的this指向；

• 执行函数的call方法，会调用该函数，并且修改函数中 的this指向；
• call中的第0个参数，代表当前函数执行时，函数中的this指向谁
• 其他参数都是给函数传的实参。

注意修改执行为body时，一定要使用document.body

function fn(a,b){
    console.log(this,a,b);
}
//直接执行，this指向window
console.log("直接调用函数，this指向window:");
fn(1,2);//window
 
//通过call更改当前函数的this指向
//更改this指向为document
console.log("调用函数的call方法,更改this指向document:");
fn.call(document,'a','b');//document 
 
//更改this指向为document.body
console.log("调用函数的call方法,更改this指向document.body:");
fn.call(document.body,'a','b');//body（（（0

apply

function.apply(this指向谁，[参数1，参数2…])调用函数，并修改函数中的this指向

• 指向函数的apply方法，会调用该函数，并且修改函数中的this指向；
• apply中的第0个参数，代表当前执行时，函数中的this指向谁；
• apply中第1个参数是个数组，数组中代表了我们要往函数中传递的参数；且所有参数只能放在一个数组里，有多个数组时，除了第一个，其他数值的参数不会被接收

apply和call唯一的区别在于，call方法直接在方法里传参，而apply是将所有参数已数组形式进行传递；

注意修改执行为body时，一定要使用document.body

function fn(a,b){
   console.log(this,a,b);
}
//直接调用，this指向window
console.log("直接调用，this指向window:");
fn('s','r');

//调用函数的apply方法,更改this指向为document
console.log("调用函数的apply方法,更改this指向document:");
fn.apply(document,['2','4']);

//调用函数的apply方法,更改this指向document.body
console.log("调用函数的apply方法,更改this指向document.body:");
fn.apply(document.body,['2','4']);

bind

function.bind(指向，参数1，参数2,…)绑定this指向

• 调用函数的bind方法，会返回一个绑定了this执行的新函数；
• 第0个参数是bind返回的新函数的this指向
• 返回新函数的this指向被绑定了，不能再被更改
• 新函数的this指向在修改原函数this指向时就已经被绑定，一旦被绑定不能再次修改

总结：调用函数的bind方法，会生成新的函数，绑定的this指向是针对新函数的，新函数this指向被绑定后，不能再继续被绑定（call和apply也不行）；如果调用时再传入新的参数，会将新的参数和被绑定的参数进行合并，被绑定的参数会一直存在；而原函数的this指向一直没有变，还可以继续调用bind方法，生成新的函数，同时给新的函数绑定新的this指向

function fn(a,b){
    console.log(this,arguments);
}
//直接调用函数，this指向window
console.log("直接调用函数，this指向window:");
fn(1,2);//window
 
//使用函数的bind方法
console.log("使用函数的bind方法，返回新的函数:");
var fn2 = fn.bind(document,3,4);
console.log(fn2 ==fn);//false 新函数和旧函数不是同一个
 
console.log("原函数的this指向:");
fn(5,6);//原函数的this指向不变，依然是window，且还可以继续调用bind方法
 
console.log("新的函数的this指向:");
console.log("如果新的函数调用时传入新的参数，会将绑定的参数和新传入的参数进行合并:");
fn2(7,8);//3,4,7,8  新函数的this指向即原函数绑定的this指向
 
//新函数的this指向在修改原函数this指向时就已经被绑定，一旦被绑定不能再次修改,且被绑定的参数也不能再被修改
//只是如果调用新函数时传入新参数，会合并两次的参数
console.log("新函数的this指向再修改原函数this指向时就已经被绑定，一旦被绑定不能再次修改:");
fn2.call(window,9,0);//这里即使再次更改this指向，fn2新函数的this指向永远不会再改变
 
//再次调用fn的bind方法
console.log("再次调用fn的bind方法，返回新的函数:");
var fn3 = fn.bind(document.body,'a','b');
console.log(fn3 == fn);
fn3('c','d');