【JavaScript20】箭头函数

发布时间 2023-08-07 21:43:51作者: Tony_xiao
  • 箭头函数没有自己的this,arguments,super或new.target。箭头函数适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。
  • 1、基本语法
//(param1, param2, ..., paramN) => { statements }

(param1, param2, ..., paramN) => expression
//相当于: (param1, param2, ..., paramN) => {return expression}
//当函数体内只有一句代码时,retrun 和 {}可以省略

//当只有一个参数时,圆括号也是可选的, 可省略
(singleParam) => {statements}
  singleParam => {statements}
//没有参数的函数应该写成一对圆括号
() => {statements}  //空的箭头函数返回undefined10 let empty = () => {};
  • 2、箭头函数不绑定this
    • 2.1:箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。
function Person() {
    this.age = 0;

    setInterval(() => {
        this.age++;  // this 指向p 实例
    }, 1000);
}

var p = new Person();
  • 2.2:通过 call 或 apply 调用时,由于箭头函数没有自己的 this,通过 call() 或 apply() 方法调用一个函数时,只能传递参数(不能绑定this),它们的第一个参数会被忽略。
var adder = {
    base: 1,

    add: function(a) {
        var f = v => v + this.base;
        return f(a);
    },

    addThruCall: function(a) {
        var f = v => v + this.base;
        var b = {
            base: 2
        };
         return f.call(b, a);
    }
};

console.log(adder.add(1));  //2
console.log(adder.addThruCall(1))  // 2
  • 3、不绑定arguments
    • 箭头函数不绑定Arguments对象。不可以使用arguments对象,该对象在函数体内不存在。
function foo(n) {
   var f = () => arguments[0] + n; //隐式绑定 foo 函数的 arguments 对象。arguments[0] 是 n, 即传给foo函数的第一个参数
   return f();
}

foo(1); //2
foo(2); //4
foo(3); //6
foo(3,2); //6
  • 4、箭头函数不能用作构造函数,和new一起使用会抛出错误。
  • 5、箭头函数没有prototype属性
  • 6、箭头函数不能用作函数生成器,因为yield关键字通常不能再箭头函数中使用(除非是嵌套在允许使用的函数内)。
  • 7、箭头函数不适合用作对象的方法