基本 JavaScript 语法答案

【问题标题】：Basic JavaScript Syntax基本 JavaScript 语法
【发布时间】：2015-03-30 13:19:03
【问题描述】：

我对 JavaScript 语法有一些疑问，期待了解它们。

首先：我不明白下面的这种语法，

{
    Key: () => function()
}

实际项目中的示例：

// Define URL routes
// See https://github.com/flatiron/director
var routes = {
    '/': () => render(require('./components/pages/Index')),
    '/privacy': () => render(require('./components/pages/Privacy'))
};

已经用在https://github.com/kriasoft/react-starter-kit/blob/master/src/app.js

它应该做什么？

和{ Key: function() {} }一样吗？

二：关于JavaScript Object中的函数，

{
    function() {}
}

实际项目中的示例：

var HomePage = React.createClass({
    statics: {
        layout: App
    },
    componentWillMount() {
        PageActions.set({title: 'React.js Starter Kit'});
    },
    render() {
        return (.....);
    }
});

已经用在https://github.com/kriasoft/react-starter-kit/blob/master/src/components/pages/Index.js

感谢您回答解释为什么这些是有效的，或者您是否可以向我发送有关 JavaScript 对象这些语法的正确信息？

【问题讨论】：

标签： javascript reactjs javascript-objects

【解决方案1】：

和{ Key: function() {} }一样吗

不完全是，但有点。它是 ECMAScript 6 中引入的一种新函数语法。但行为有些不同。

最值得注意的是，函数中this 的值将采用函数创建环境中this 的值，因此它不像旧语法那样基于函数的调用方式。

该函数仍然是第一类对象并创建一个闭包，因此在这方面没有区别。此外，如果函数体仅包含单个表达式语句，则可以省略 return 运算符。

正如@HeadCode 所指出的，new 运算符不允许与此函数一起使用，因此它不适用于构造对象。我还想说它有适当的尾调用优化，但我不确定。

语法的其余部分只是一个典型的对象，除了它使用新的简写方法分配。

这里是粗箭头函数语法的 MDN 文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

这里是对象初始化器语法的 MDN 文档。有关新语法，请参阅 ECMAScript6 部分：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

【讨论】：

不同之处在于使用带有粗箭头函数的 new 运算符会导致 TypeError。 robcee.net/2013/fat-arrow-functions-in-javascript
问题第二部分的componentWillMount() 怎么样？是否等同于componentWillMount: function()？
能否添加对 ECMAScript 6 规范相应部分的引用？
@Barmar：这让我大吃一惊。起初它看起来像对象初始化器的 ECMAScript 5 getter 语法，但现在我发现它没有 get。我认为这是对新的class 东西的补充的速记方法赋值语法，但我不知道所有细节。
@Barmar：为胖箭头函数和对象初始化语法添加了 MDN 引用。

【解决方案2】：

它是 ES6（JavaScript 的下一个版本）中编写函数的新方法。您可以找到更多信息here。

目前并不真正支持 ES6（参见 table），因此您需要在 ES5 中编译 ES6。（发生here，在您的示例中带有“和谐”标志）使其在您的浏览器中运行。

基本上：

var test = () => {} 与var test = function() {}.bind(this) 相同

和

componentWillMount() {} 与componentWillMount:function() {} 相同

【讨论】：