使用 ECMAScript 2017 箭头函数的一些注意事项-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2017 引入了箭头函数的概念，这种函数语法更加简洁明了，让代码看起来更加优美。然而，它也有一些需要注意的地方。本文将介绍使用箭头函数时需要注意的一些事项。

1. 没有 this 绑定

箭头函数没有自己的 this 绑定，它会继承外部的 this。这意味着如果在箭头函数内部使用 this，它将指向外部函数的 this，而不是箭头函数本身的 this。这可能会导致意想不到的结果。

-- -------------------- ---- -------
----- ------ -
  ----------------- -
    --------- - -----
  -
  --------- -
    ------------- -- -
      -----------------------
    -- ------
  -
-

----- ------ - --- --------------
----------------- -- -- -----

在上面的代码中，sayName 方法中的箭头函数会继承 Person 实例的 this 绑定，而不是 setTimeout 函数的 this 绑定。因此，它可以正确地输出 Bob。

2. 不能用作构造函数

箭头函数不能用作构造函数。如果尝试使用 new 关键字调用箭头函数，将会抛出一个错误。

const Foo = () => {};
const foo = new Foo(); // 抛出 TypeError

3. 没有 arguments 绑定

箭头函数也没有自己的 arguments 绑定，它会继承外部函数的 arguments。这意味着如果在箭头函数内部使用 arguments，它将指向外部函数的 arguments，而不是箭头函数本身的 arguments。

-- -------------------- ---- -------
-------- ----- -
  ----- --- - -- -- -
    --- ------ - --
    --- ---- - - -- - - ----------------- ---- -
      ------ -- -------------
    -
    ------ -------
  --
  ------ ------
-

------------------ -- ---- -- -- --------------

在上面的代码中，箭头函数 add 继承了外部函数 sum 的 arguments，因此它无法访问 sum 函数的参数。这将导致 ReferenceError。

4. 没有 prototype 属性

箭头函数没有 prototype 属性，因此无法作为构造函数使用。这也意味着无法向箭头函数添加属性或方法。

const Foo = () => {};
Foo.prototype.bar = () => {}; // TypeError: Cannot set property 'bar' of undefined

5. 箭头函数与普通函数的区别

除了上述注意事项外，箭头函数与普通函数的区别在于以下几点：

箭头函数没有自己的 this 绑定，而普通函数有。
箭头函数没有自己的 arguments 绑定，而普通函数有。
箭头函数没有 prototype 属性，而普通函数有。

结论

箭头函数是一种简洁明了的函数语法，但它也有一些需要注意的地方。在使用箭头函数时，需要注意它们没有自己的 this、arguments 绑定和 prototype 属性。如果您需要使用这些功能，应该使用普通函数。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67458a28c1a23897ea9f953e