call、bind、apply的作用与区别

call、bind、apply的作用与区别

作用：改变函数体内this指向

使用：

fn.call(), fn.apply(), fn.bind()
1

示例1

let user = {  // 定义一个user对象
	name: '张三'
}

function fn() {  // 定义一个函数
	console.log(this); // log1
	console.log(this.name); // log2
}

// 执行函数fn
fn()
1
2
3
4
5
6
7
8
9
10
11

当未改变this指向时，fn的this指向window，所以上述代码log1打印内容为window，log2打印内容为空，但是想让其打印“张三”，可以做如下操作
call方法：

// 执行函数fn
fn.call(user);
// log1 => user对象， log2 => 张三
1
2
3

apply方法：

// 执行函数fn
fn.apply(user);
// log1 => user对象， log2 => 张三
1
2
3

bind方法：

// 执行函数fn
fn.bind(user);  
1
2

上述并不会有任何打印因为bind返回一个函数，需要进一步执行，所以需要改成

// 执行函数fn
let fnBind = fn.bind(user);  
fnBind();  // 或者直接fn.bind(user)();
// log1 => user对象， log2 => 张三
1
2
3
4

由上可知区别1： call和apply返回的是一个临时this会立即执行，而bind是返回一个this永久改变的函数，需要调用才会执行

示例2：函数带参数

let user = {  // 定义一个user对象
	name: '张三'
}
let job = ['前端', '100'];
function fn(job, salary) {  // 定义一个函数, job-职位， salary-工资
	console.log(`${this.name}职位是${job},时薪为${salary}元`); // log3
}

// 执行函数fn
fn.call(user, ...job);  // log3 => 张三职位是前端,时薪为100元
fn.apply(user, job); // log3 => 张三职位是前端,时薪为100元
fn.bind(user, ...job);  // log3 => 张三职位是前端,时薪为100元
1
2
3
4
5
6
7
8
9
10
11
12

由上可知区别2： call和bind传递参数需要将参数全部写出，而apply传递参数需要传递一个参数数组

综上所述

区别：
1、call和apply返回的是一个临时this会立即执行，而bind是返回一个this永久改变的函数，需要调用才会执行
2、call和bind传递参数需要将参数全部写出，而apply传递参数需要传递一个参数数组