“箭头函数”和“函数”是否等效/可互换?

2024-05-01

ES2015中的箭头函数提供了更简洁的语法。

  • 我现在可以用箭头函数替换所有函数声明/表达式吗?
  • 我需要注意什么?

例子:

构造函数

function User(name) {
  this.name = name;
}

// vs

const User = name => {
  this.name = name;
};

原型方法

User.prototype.getName = function() {
  return this.name;
};

// vs

User.prototype.getName = () => this.name;

对象(文字)方法

const obj = {
  getName: function() {
    // ...
  }
};

// vs

const obj = {
  getName: () => {
    // ...
  }
};

回调

setTimeout(function() {
  // ...
}, 500);

// vs

setTimeout(() => {
  // ...
}, 500);

可变参数函数

function sum() {
  let args = [].slice.call(arguments);
  // ...
}

// vs
const sum = (...args) => {
  // ...
};

tl;dr: No!箭头函数和函数声明/表达式并不等价,不能盲目替换。
如果您要替换的功能是not use this, arguments并且不被调用new, 好的。


正如经常发生的那样:这取决于。箭头函数与函数声明/表达式有不同的行为,所以让我们先看看差异:

1. 词汇this and arguments

箭头函数没有自己的函数this or arguments捆绑。相反,这些标识符像任何其他变量一样在词法范围内解析。这意味着在箭头函数内部,this and arguments参考值this and arguments在环境中箭头函数是defined在(即箭头函数“外部”):

// Example using a function expression
function createObject() {
  console.log('Inside `createObject`:', this.foo);
  return {
    foo: 42,
    bar: function() {
      console.log('Inside `bar`:', this.foo);
    },
  };
}

createObject.call({foo: 21}).bar(); // override `this` inside createObject
// Example using a arrow function
function createObject() {
  console.log('Inside `createObject`:', this.foo);
  return {
    foo: 42,
    bar: () => console.log('Inside `bar`:', this.foo),
  };
}

createObject.call({foo: 21}).bar(); // override `this` inside createObject

在函数表达式的情况下,this指的是在内部创建的对象createObject。在箭头函数的情况下,this指的是this of createObject itself.

如果您需要访问,这使得箭头函数非常有用this当前环境:

// currently common pattern
var that = this;
getData(function(data) {
  that.data = data;
});

// better alternative with arrow functions
getData(data => {
  this.data = data;
});

Note这也意味着not可以设置箭头函数this with .bind or .call.

如果你不是很熟悉this,考虑阅读

  • MDN-这个 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

2. 不能用以下方式调用箭头函数new

ES2015 区分的函数是call能够和功能是构造有能力的。如果函数是可构造的,则可以使用以下命令调用它new, i.e. new User()。如果一个函数是可调用的,则无需调用它new(即正常的函数调用)。

通过函数声明/表达式创建的函数既可构造又可调用。
箭头函数(和方法)只能调用。class构造函数只能构造。

如果您尝试调用不可调用的函数或构造不可构造的函数,您将收到运行时错误。


知道了这一点,我们可以做出以下陈述。

可更换:

  • 不使用的功能this or arguments.
  • 与使用的函数.bind(this)

Not可更换:

  • 构造函数
  • 添加到原型的函数/方法(因为它们通常使用this)
  • 可变参数函数(如果它们使用arguments(见下文))
  • 生成器函数,需要function*符号

让我们使用您的示例仔细看看这一点:

构造函数

这是行不通的,因为箭头函数不能用new。继续使用函数声明/表达式或使用class.

原型方法

很可能不会,因为原型方法通常使用this来访问实例。如果他们不使用this,然后就可以更换它了。但是,如果您主要关心简洁的语法,请使用class以其简洁的方法语法:

class User {
  constructor(name) {
    this.name = name;
  }
  
  getName() {
    return this.name;
  }
}

对象方法

对于对象字面量中的方法也是如此。如果该方法想要通过以下方式引用对象本身this,继续使用函数表达式,或者使用新的方法语法:

const obj = {
  getName() {
    // ...
  },
};

回调

这取决于。如果你给外部别名,你绝对应该替换它this或正在使用.bind(this):

// old
setTimeout(function() {
  // ...
}.bind(this), 500);

// new
setTimeout(() => {
  // ...
}, 500);

But:如果调用回调的代码显式设置this到一个特定的值,事件处理程序经常出现这种情况,尤其是 jQuery,并且回调使用this (or arguments), you cannot使用箭头函数!

可变参数函数

由于箭头函数没有自己的arguments,你不能简单地用箭头函数替换它们。然而,ES2015 引入了一种替代方法arguments: the 剩余参数 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters.

// old
function sum() {
  let args = [].slice.call(arguments);
  // ...
}

// new
const sum = (...args) => {
  // ...
};

相关问题:

  • 我什么时候应该在 ECMAScript 6 中使用箭头函数? https://stackoverflow.com/q/22939130/218196
  • ES6 箭头函数是否有自己的参数? https://stackoverflow.com/q/33288998/1048572
  • ES6 箭头函数和使用 Function.prototype.bind 绑定的函数之间有什么区别(如果有)? https://stackoverflow.com/q/32535110/1048572
  • 如何使用箭头函数(公共类字段)作为类方法? https://stackoverflow.com/q/31362292/1048572

更多资源:

  • MDN - 箭头函数 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

“箭头函数”和“函数”是否等效/可互换? 的相关文章

  • ReferenceError:找不到变量:需要

    我在加载时遇到问题node modules到我的网页之一 我已经安装了 npm node js 并且我想使用require 函数在我的网站上初始化 Firebase 我不知道为什么 但它抛出引用错误 ReferenceError 找不到变量
  • HTMLImageElement 作为 React Child 无效

    我正在尝试异步加载图像 并且仅在加载图像后才将其显示在 React 应用程序中 componentDidMount const img new Image img onload gt this setState originalImage
  • 如何使用键盘和鼠标控制相机 - Three.js

    我在 WEB GL 中有一个带有 Three js 的 3D 环境 并且我曾经使用 Orbitcontrols js http codepen io nireno pen cAoGI http codepen io nireno pen c
  • 在 MongoDB 中查找具有字符串 ID 数组的文档

    我有一个 id 字符串数组 我想将其与 find 函数一起使用 db companies find id in arr arr看起来像这样 563a2c60b511b7ff2c61e938 563a2c60b511b7ff2c61e8b7
  • Ext JS - 如何滚动到文本区域的底部

    这是我下面的代码 如何滚动到文本区域的底部 它一定是类似的东西 Ext getCmp output setScrollPosition Ext getCmp output getScrollHeight 这是我的文本区域代码 var myW
  • 限制文本区域中每行的字符数

    我整个周末都在寻找解决这个难题的方法 但尚未找到一个可以正常工作的解决方案 我想要实现的是限制文本区域中每行的字符数 不是相同地限制它们 而是我选择的每行不同的字符数 例如 我只想在我的文本区域中包含 4 行 第 1 2 和 3 行将限制为
  • ant-d upload中如何为removeFile添加PopConfirm一个图片文件

    我正在使用 Ant d Upload 通过本地系统上传文件 然后单击文件预览图像上的删除图标 图像文件将被删除 我想添加一个弹出确认 所以我尝试在 onRemovefunction 中添加确认作为承诺但它不起作用 它在浏览器中显示警报 on
  • 创建 Cookie 时需要帮助

    我有一个名为yes和另一个名叫no
  • Ember.JS - 如何在同一页面中使用多个模型、控制器和视图?

    我主要了解 Ember JS 的基础知识 大多数示例实际上只处理单个控制器和模型以在页面上显示某些内容 我真的很想用 Ember 构建一个完整的 Web 应用程序 所以有人能告诉我如何组织和连接多个控制器 模型和视图到一个页面中吗 例如 如
  • 保存/导出Chrome的JavaScript控制台输入历史记录

    无论如何 我可以保存或导出 JavaScript 控制台的历史记录吗 input 控制台历史记录 在 Google Chrome 中 我不想保存输出或错误 因此将鼠标悬停在控制台框上 右键单击并选择Save as 不是解决方案 我不想每次都
  • iframe 重新加载按钮

    我浏览了很多网站 但似乎没有一个能正常工作 或者我不明白它们 我想要一个刷新某个 iframe 的简单按钮 该按钮将位于父页面上 并且 iframe 名称为 Right 有很多方法可以做到这一点 假设这个iframe markup 我们可以
  • 选中复选框时提交表单

    有没有办法在选中复选框时提交表单
  • Keycloak javascript 适配器 `keycloak.init` 加载 404 iframe

    我正在尝试使用 javascript 适配器将 Keycloak 集成到我的客户端应用程序keycloak js 但是 我似乎无法让它发挥作用 这是我的代码 const keycloak new Keycloak realm my real
  • 如何在网页上实现文件上传进度条?

    当用户将文件上传到我的网络应用程序时 我想显示比动画 gif 更有意义的内容 我还有哪些可能性 编辑 我正在使用 Net 但我不介意是否有人向我展示与平台无关的版本 如果您对这一切在客户端通常如何工作感兴趣 就是这样 所有解决方案都通过 J
  • WebRTC:通道、轨道和流与 RTP SSRC 和 RTP 会话之间的关系

    来自 Mozilla 网站 https developer mozilla org en US docs Web API Media Streams API https developer mozilla org en US docs We
  • ES6 模板文字的延迟执行

    我正在玩新的ES6 模板文字 http tc39wiki calculist org es6 template strings 我首先想到的是String format对于 JavaScript 所以我开始实现一个原型 String pro
  • 如何获取使用 .map 渲染的第一个元素的 ref?

    我需要在几行中显示视频 卡片 的缩略图 并重点关注第一个缩略图 我使用嵌套地图进行了显示 该代码基本上迭代视频数组并返回多行视频 我们如何关注第一个渲染的元素 我认为我们需要获得第一个要聚焦的元素的引用 但是我们如何在这里设置 ref 并在
  • React Native - 跨屏幕传递数据

    我遇到了一些麻烦react native应用程序 我不知道如何跨屏幕传递数据 我意识到还有其他类似的问题在 SO 上得到了回答 但是这些解决方案对我来说不起作用 我正在使用StackNavigator 这是我的设置App js file e
  • 当选择下拉列表中的某些值时,取消选中复选框

    当我从下拉列表中选择某个值或用户未从下拉列表中选择任何值时 我需要取消选中复选框 我现在正在使用 Jquery 这是我现在使用的代码 但它不起作用 Script
  • 在 javascript 中使用 xPath 解析具有默认命名空间的 XML

    我需要创建一个 XML xPath 解析器 所有解析都必须在客户端进行 使用 JavaScript 我创建了一个 javascript 来执行此操作 在默认名称空间发挥作用之前 一切看起来都正常 我根本无法查询具有默认命名空间的 XML 我

随机推荐