bind和call和apply
一、作用
call,apply和bind的作用是改变函数执行的上下文,即改变函数运行时的this指向。
var name = "lucy";
var obj = {
name: "martin",
say: function () {
console.log(this.name);
}
};
obj.say(); // martin,this指向obj对象
setTimeout(obj.say,0); // lucy,this指向window对象
正常情况下,say输出的是martin,但是在定时器中输出的是lucy。
因为在定时器中是作为回调函数来执行的,因此回到主栈运行时是在全局执行上下文的环境中执行的,这时候this指向的是window,所以输出的是lucy。
用下面的方法可以改变this的指向,由window改为obj。
setTimeout(obj.say.bind(obj),0); // lucy,this的指向由window对象改变为obj对象
二、区别
1、apply
apply接收两个参数,第一个参数是this的指向,第二个参数是函数接受的参数,以数组的形式传入。
改变this的指向后函数会立刻执行,这个方法临时改变一个this的指向。
function fn(...args){
console.log(this,args);
}
let obj = {
myname:"张三"
}
fn.apply(obj,[1,2]); // obj,[1,2] this会变成传入的obj,传入的参数必须是一个数组
fn(1,2) // window,[1,2] this指向window对象
当第一个参数是null或者undefined的情况下,则默认指向window(在浏览器中)。
fn.apply(null,[1,2]); // this指向window
fn.apply(undefined,[1,2]); // this指向window
2、call
call的第一个参数是this的指向,之后的是一个参数列表,改变this的指向后函数会立即执行,call也只能临时改变this的指向一次。
function fn(...args){
console.log(this,args);
}
let obj = {
myname:"张三"
}
fn.call(obj,1,2); // obj,[1,2] this会变成传入的obj,传入的参数必须是一个数组
fn(1,2) // window,[1,2] this指向window对象
第一个参数是null和undefined的情况下,默认指向window(在浏览器中)。
3、bind
bind第一个参数是this的指向,后面传入的是参数列表,且可以分多次传入。bind改变this的指向后不会立即执行,会返回一个永久改变this指向的函数。
function fn(...args){
console.log(this,args);
}
let obj = {
myname:"张三"
}
const bindFn = fn.bind(obj); // this会变成传入的obj,bind不是立即执行,需要单独执行一次。
bindFn(1,2) // obj,[1,2] this指向obj
fn(1,2) // window,[1,2] this指向window
4、总结
- 三种方法都可以改变函数的this对象指向。
- 三种方法都是第一个参数是this将要指向的对象,如果没有这个参数或者这个参数是null或者undefined则默认指向window。
- 三者都可以传参,但是apply传入的是数组,call和bind传入的是参数列表。apply是一次性传入,而bind可以分为多次传入。
- bind是返回绑定this之后的函数,而apply和call是立即执行。
三、实现
bind实现了三个步骤:
- 修改this指向
- 动态传递参数
- 兼容new关键字
动态传递参数的两种方法:
//方式一:只在bind中传递参数
fn.bind(obj,1,2)();
//方式二:在bind中传递函数参数,也在返回函数中传递参数
fn.bind(obj,1)(2);
手写bind
Function.prototype.myBind = function (context) {
// 判断调用对象是否为函数
if (typeof this !== "function") {
throw new TypeError("Error");
}
// 获取参数
const args = [...arguments].slice(1),
fn = this;
return function Fn() {
// 根据调用方式,传入不同绑定值
return fn.apply(this instanceof Fn ? new fn(...arguments) : context, args.concat(...arguments));
}
}