JS知识点小结2

JavaScript 中 call()、apply()、bind() 的用法

应用场景

正常情况下一个方法中的 this 指针默认是指向调用它的 obj 对象的，但有时我们并不想使用默认的this指向，而是需要让其重定向至特定目标，这时候就需要使用call()、apply()、bind()这三个方法来改变this指向。

var name="a";
let obj={
 name:"b",
 say:function() {
 console.log(this.name);
 }
};
obj.say();   // 输出b
obj.say.call(window);   // 输出a

第二次，默认this指向obj，输出全局变量name的值"a"。 第二次，通过call来把this定义为指向window，输出全局变量name的值"a"。

call() 的使用

call的语法：

function.call(thisArg, arg1, arg2, ...)

call方法的第一个参数是this的指向，后面传入的是一个参数列表。当一个参数为null或undefined的时候，表示指向window（在浏览器中）。call只是临时改变一次this指向，并立即执行，得到函数的返回值。

apply()的使用

apply的语法：

function.apply(thisArg , [argsArray])

apply接受两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以数组的形式传入。同call一样，第一参数为null、undefined的时默认指向window(在浏览器中)，使用apply方法临时改变this后原函数也会立即执行。例如：

var name = 'papa';
const pArr = [35, 'blue', true];
let obj={
 name:'jack',
 say:function(x, y, z) {
 console.log(this.name +'是'+ x +' '+ y+' ' + z);
 }
};
obj.say(8, 'red', false);   // 输出'jack是8 red false'
obj.say.apply(null, pArr);   // 输出'papa是35 blue true'

bind()的使用

bind的语法：

function.bind(thisArg, arg1, arg2, ...)

bind方法和call很相似，第一参数也是this的指向，后面传入的也是一个参数列表(但是这个参数列表可以分多次传入，call则必须一次性传入所有参数)；但是它改变this指向后不会立即执行，而是返回一个永久改变this指向的函数。而且，bind方法可以分多次传参，最后函数运行时会把所有参数连接起来一起放入函数运行。例如：

const arr = [1,5,3,10];
let getMax=Math.max.bind(null,arr[0],arr[1],arr[2]);
console.log(getMax(arr[3])); //输出10，分两次传参

总结：

1. 三者都可以改变函数的this对象指向。
2. 三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则浏览器中默认指向全局window。
3. 三者都可以传参，但是apply传入一个参数数组，而call和bind是参数列表；apply和call是一次性传入参数，而bind可以分为多次传入。
4. bind 是返回绑定新定义this之后的函数，便于稍后调用；apply 、call 则是临时改变this立即执行一次。