基本 JavaScript 语法

Question

我对 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对象中的函数，

{
    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 对象的这些语法的正确信息？

Answer 1

Is it the same as { Key: function() {} }

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

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

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

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

其余语法只是一个典型的对象，只是它使用新的 shorthand 进行方法分配。

这是粗箭头函数语法的 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

Answer 2

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

ES6 目前还没有得到真正的支持（请参阅此 table) so you will need to compile your ES6 in ES5. (Happening here，在您的示例中使用标志 "harmony"）以使其在您的浏览器中运行。

基本上：

var test = () => {} 等同于 var test = function() {}.bind(this)

和

componentWillMount() {} 等同于 componentWillMount:function() {}

基本 JavaScript 语法

Basic JavaScript Syntax

javascript

javascript-objects

reactjs