在使用js的时候,很多时候,直接使用某个函数,会发现由于没有调用该函数的对象,函数内部的this指针会指向全局的空间。
解决的方法
一般出现这种需要调用对象的情况,我们往往需要手动的指定调用对象,主要有以下三种方式:
- 使用
apply
- 使用
call
- 使用
bind
其中,apply
,call
的的区别主要在于函数参数的差别,apply
是以数组作为参数传递,call
则是一个个的传递。
bind
的作用是在于手动的指定函数的对象,并重新生成一个新的函数。
举个例子
let obj = {
name: "qianzhixiang",
func: function(a,b){
console.log(this.name,a,b);
}
};
obj.func(1,2); // qianzhixiang 1 2
let func = obj.func;
func(1,2); // 1 2
let func_ = func.bind(obj);
func_(1,2);// qianzhixiang 1 2
func(1,2);// 1 2
func.call(obj,1,2);// qianzhixiang 1 2
func.apply(obj,[1,2]);// qianzhixiang 1 2
如上述例子,基本可以说明几者不同的区别。
箭头函数
上面似乎没有什么问题,也很完美,可是,在箭头函数中却存在问题,箭头函数中的this和函数的this有本质区别,箭头函数中的this是函数外最近的那个this,因此,apply
、call
方法其实并不会起作用。
还是那个例子
let obj = {
name: "qianzhixiang",
func: (a,b) => {
console.log(this.name,a,b);
}
};
obj.func(1,2); // 1 2
let func = obj.func;
func(1,2); // 1 2
let func_ = func.bind(obj);
func_(1,2);// 1 2
func(1,2);// 1 2
func.call(obj,1,2);// 1 2
func.apply(obj,[1,2]);// 1 2
可以看到,无论是哪种方式,都会忽略对应的this.使用时请慎重。