相关疑难解决方法(0)

我最近开始维护其他人的JavaScript代码.我正在修复错误,添加功能,并尝试整理代码并使其更加一致.

以前的开发人员使用两种声明函数的方法,如果背后有原因,我就无法解决.

这两种方式是:

var functionOne = function() {
    // Some code
};

function functionTwo() {
    // Some code
}

使用这两种不同方法的原因是什么？每种方法的优缺点是什么？有一种方法可以通过一种方法完成,而另一种方法无法完成吗？

规范问题如果在用箭头函数替换函数声明/表达式后发现有关问题的问题,请将其作为此副本的副本关闭.

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(() => {
  // ...
}, …

这个问题针对的是那些在即将到来的ECMAScript 6(Harmony)背景下已经考虑过代码风格并且已经使用过该语言的人.

有了() => {}和function () {}我们有两种非常相似的方法来编写ES6中的函数.在其他语言中,lambda函数通常通过匿名来区分自己,但在ECMAScript中,任何函数都可以是匿名的.这两种类型中的每一种都具有唯一的使用域(即,当this需要明确地绑定或明确地不绑定时).在这些域之间存在大量的情况,其中任何一种符号都可以.

ES6中的箭头功能至少有两个限制:

• 不要工作 new
• 固定this在初始化时限制范围

抛开这两个限制,箭头函数理论上几乎可以在任何地方替换常规函数.在实践中使用它们的正确方法是什么？是否应使用箭头功能,例如:

• "他们工作的每个地方",即在任何地方,函数不必对this变量不可知,我们不创建对象.
• 只有"需要的任何地方",即事件监听器,超时,需要绑定到某个范围
• 具有'短'功能但不具有'长'功能
• 仅适用于不包含其他箭头功能的功能

我正在寻找的是在ECMAScript的未来版本中选择适当的函数符号的指南.该指南需要明确,以便可以向团队中的开发人员讲授,并保持一致,这样就不需要从一个函数符号到另一个函数符号进行不断的重构.

我问这个问题是因为我和我的同事对编码风格有争议,因为他更喜欢箭头功能声明:

const sum = (a, b) => a + b;

而且我更喜欢旧式的独立功能声明:

function sum(a, b) {
    return a + b;
}

我的观点是旧式代码更具可读性,您可以更清楚地区分函数和变量声明.他的观点是带箭头功能的代码运行得更快.

当您使用旧式独立函数声明而不是箭头函数时,您是否了解实际性能惩罚(在第8版中)？这种处罚真的存在吗？

我忍不住想知道在React函数组件中使用普通函数和粗箭头之间是否有任何优势

const MyMainComponent = () => (
  <main>
    <h1>Welcome to my app</h1>
  </main>
)

function MyMainComponent() {
  return (
    <main>
      <h1>Welcome to my app</h1>
    </main>
  )
}

两种工作当然都很好，但是有推荐的写法吗？有任何论点支持另一方吗？

编辑：我知道普通javascript函数（即上下文，堆栈跟踪，return关键字等）的差异可能会影响您对函数的使用方式。但是我纯粹是在React组件方面问这个问题。