箭头函数和call、apply

在使用js的时候,很多时候,直接使用某个函数,会发现由于没有调用该函数的对象,函数内部的this指针会指向全局的空间。

解决的方法

一般出现这种需要调用对象的情况,我们往往需要手动的指定调用对象,主要有以下三种方式:

  1. 使用apply
  2. 使用call
  3. 使用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,因此,applycall方法其实并不会起作用。

还是那个例子

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.使用时请慎重。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容