箭头函数

ES6箭头函数的this指向 谭慧琳
文章标签: 箭头函数

箭头函数相信大家在日常开发中用到的地方非常之多,因为它很简洁,可读性强,但是它最大的好处,其实是解决了匿名函数的this指向问题,有利于封装回调函数。

下面是普通函数的列子:

var name = 'window'; // 其实是window.name = 'window'

var A = {

   name: 'A',

   sayHello: function(){

      console.log(this.name)

   }

}

A.sayHello();// 输出A

var B = {

  name: 'B'

}

A.sayHello.call(B);//输出B

A.sayHello.call();//不传参数指向全局window对象,输出window.name也就是window

从上面可以看到,sayHello这个方法是定义在A对象中的,当当我们使用call方法,把其指向B对象,最后输出了B;可以得出,sayHello的this只跟使用时的对象有关。

改造一下:

var name = 'window'; 

var A = {

   name: 'A',

   sayHello: () => {

      console.log(this.name)

   }

}

A.sayHello();// 还是以为输出A ? 错啦,其实输出的是window

一开始,我重点标注了“该函数所在的作用域指向的对象”,作用域是指函数内部,这里的箭头函数,也就是sayHello,所在的作用域其实是最外层的js环境,因为没有其他函数包裹;然后最外层的js环境指向的对象是winodw对象,所以这里的this指向的是window对象。

那如何改造成永远绑定A呢:

var name = 'window'; 

var A = {

   name: 'A',

   sayHello: function(){

      var s = () => console.log(this.name)

      return s//返回箭头函数s

   }

}

var sayHello = A.sayHello();

sayHello();// 输出A 

var B = {

   name: 'B';

}

sayHello.call(B); //还是A

sayHello.call(); //还是A

OK,这样就做到了永远指向A对象了,我们再根据“该函数所在的作用域指向的对象”来分析一下:

  1. 该函数所在的作用域:箭头函数s 所在的作用域是sayHello,因为sayHello是一个函数。
  2. 作用域指向的对象:A.sayHello指向的对象是A。



还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :