【JS】关于es6的一些基础知识

箭头函数(常用)

ES6 允许使用箭头(=>)定义函数

箭头函数对于使用function关键字创建的函数有以下区别

  1. 箭头函数没有arguments(建议使用更好的语法,剩余运算符替代)

  2. 箭头函数没有prototype属性,没有constructor,即不能用作与构造函数(不能用new关键字调用)

  3. 箭头函数没有自己this,它的this是词法的,引用的是上下文的this,即在你写这行代码的时候就箭头函数的this就已经和外层执行上下文的this绑定了(这里个人认为并不代表完全是静态的,因为外层的上下文仍是动态的可以使用call,apply,bind修改,这里只是说明了箭头函数的this始终等于它上层上下文中的this)
    【JS】关于es6的一些基础知识

     

    因为setTimeout会将一个匿名的回调函数推入异步队列,而回调函数是具有全局性的,即在非严格模式下this会指向window,就会存在丢失变量a的问题,而如果使用箭头函数,在书写的时候就已经确定它的this等于它的上下文(这里是makeRequest的函数执行上下文,相当于讲箭头函数中的this绑定了makeRequest函数执行上下文中的this),所以this就指向了makeRequest中的a变量

    箭头函数中的this即使使用call,apply,bind也无法改变指向(这里也验证了为什么ECMAScript规定不能使用箭头函数作为构造函数,因为它的this已经确定好了无法改变)

    建议

    箭头函数替代了以前需要显式的声明一个变量保存this的操作,使得代码更加的简洁

    ES5写法不推荐:
    【JS】关于es6的一些基础知识

    ES6箭头函数:
    【JS】关于es6的一些基础知识
    值得注意的是makeRequest后面的function不能使用箭头函数,因为这样它就会再使用上层的this,而再上层是全局的执行上下文,它的this的值会指向window

 

setTimeout第一个参数使用了箭头函数,它会引用上下文的this,而它的外层也是一个箭头函数,又会引用再上层的this,最上层就是整个全局上下文,即this的值为window对象,所以没有变量a

在数组的迭代中使用箭头函数更加简洁,并且省略了return关键字

【JS】关于es6的一些基础知识

不要在可能改变this指向的函数中使用箭头函数,类似Vue中的methods,computed中的方法,生命周期函数,Vue将这些函数的this绑定了当前组件的vm实例,如果使用箭头函数会强行改变this,因为箭头函数优先级最高(无法再使用call,apply,bind改变指向)

【JS】关于es6的一些基础知识

在把箭头函数作为日常开发的语法之前,个人建议是去了解一下箭头函数的是如何绑定this的,而不只是当做省略function这几个单词拼写,毕竟那才是ECMAScript真正希望解决的问题

以上是 【JS】关于es6的一些基础知识 的全部内容, 来源链接: utcz.com/a/68454.html

回到顶部