一、作用
🍕🍔🍕改变函数运行时的this指向
举个例子
var name = "kkkjjjj";
var obj = {name = '111112222',say:function(){console.log(this.name) }
};
obj.say();//111112222
setTimeout(obj.say,0) // kkkjjjj 指向 window 对象才能访问 全局变量
我实际需要 this 指向 obj 对象,访问作用域内的变量,需要改变 this指向了
setTimeout(obj.say.bind(obj),0)
二、区别
apply
🍕🍕🍕接受两个参数,第一个参数是this的指向,第二个参数是函数接受的参数,以数组
的形式传入
改变this指向后原函数会立即执行,且此方法只是临时改变this指向一次
function fn(...args){console.log(this,args)
}
let obj = {name:'ls'
}
fn.apply(obj,[4,5,6])
fn(4,5,6)
注意:第一个参数为null、undefined的时候,默认指向window(在浏览器中)
call
🍔🍔🍔第一个参数也是this的指向,后面传入的是一个参数列表
,改变this指向后原函数会立即执行,且此方法只是临时改变this指向一次
同样的,当第一个参数为null、undefined的时候,默认指向window(在浏览器中)
bind
第一个参数也是this的指向,后面传入的也是一个参数列表(但是这个参数列表可以分多次传入)
特点:改变 this 指向后不会立即执行,而是返回一个永久改变 this 指向的函数
function fn(...args){console.log(this,args)
}
let obj = {name:"ls"
}
const bindFn = fn.bind(obj);
bindFn(4,5,6)
fn()
实现
实现bind的步骤
- 修改this 指向
- 动态传递参数
// 方式一:只在bind 中传递函数参数
fn.bind(obj,1,2)()
// 方式二:在bind 中传递函数参数,也在返回函数中传递参数
fn.bind(obj,1)(2)
- 兼容 new 关键字
Function.prototype.Bind = 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(...argument) : context,args.concat(...arguments)); }
}