js 箭头函数特性

分类 JavaScript 标签 JavaScript 评论:
  1. js 箭头函数特性

js 箭头函数特性

  • 不能使用new关键字，不能用作构造函数
  • 箭头函数不能用作generator函数
  • 箭头函数内部没有内置的arguments参数，通过剩余参数获取
  • this指向的不是调用者，而是指向箭头函数所在作用域的环境上下文，箭头函数一旦声明，则this的指向就固定了，不会变

我们先来看看面试中常问到的箭头函数中的this指向问题

下面的代码中，箭头函数say作为属性，放在obj对象中

let obj = {
    username: 'jerry',
    say: () => {
        console.log('this指向：', this);
        console.log('username', this.username);
    }
}

调用say方法，看看函数输出，并看看this指向哪里

obj.say(); 
// this指向： window
// username undefined

结果this指向的是window，而不是指向obj，这是因为箭头函数的特殊性，箭头函数所处在的作用域是obj，而obj所存在的环境上下文是window，因此obj内部的this指向window，而此时打印this.username，输出的是window上的username，如果window上有username，则打印相应的值，否则打印undefined;

再来看另外一个例子

let obj2 = {
  username: 'tom',
  say: function () {
      return () => {
        console.log('this指向：', this);
        console.log('username：', this.username);
      }
  }
}

调用结果

this指向： {username: "tom", say: ƒ}
username： tom

结果this指向的obj2对象，此时箭头函数所在的作用是函数say的作用域，而say函数的上下文是在obj2里，因此this指向的是obj2，打印的username是obj2对象的username，即tom

总结：

  • 箭头函数的this不是由调用者决定，而是在生成的时候就绑定了，在任何地方调用都不会改变箭头函数里的this指向
  • 箭头函数的this指向的是该箭头函数创建时的作用域的父级上下文环境

箭头函数其他的一些特性：

  • 箭头函数不能用作构造函数，不能使用 new 关键字
  • 箭头函数不能用作generator函数
  • 箭头函数中没有arguments对象，可以使用...args获取参数
const fun1 = (...args) => {
  console.log(args);      // [1, 2, [3, 4], {num: 5}]
  console.log(arguments); // 报错：arguments is not defined
}
fun1(1, 2, [3, 4], {num: 5})
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 289211569@qq.com

©2016-2023 Daryl