【问题标题】:What is the this syntax in Babel compiled code?Babel 编译代码中的 this 语法是什么?
【发布时间】:2016-12-29 07:32:09
【问题描述】:

我正在阅读this site 的 ES2015 入门,这个例子是针对 computed property names 给出的:

const namespace = '-webkit-'; 
const style = { 
  [namespace + 'box-sizing'] : 'border-box', 
  [namespace + 'box-shadow'] : '10px10px5px #888888' 
}; 

这很简单,但我不明白 Babel 正在做什么来转换它。它给出了这个:

var _style;
var namespace = '-webkit-';
var style = (
  _style = {},
  _style[namespace + 'box-sizing'] = 'border-box',
  _style[namespace + 'box-shadow'] = '10px 10px 5px #888888',
  _style
);

(我已经重新格式化了缩进)

Online Babel Transpilation here

我找不到有关此语法是什么的文档:_style 对象的声明,然后是属性名称及其值的括号中的列表,然后在结束括号前简单地以, _style 结尾。

【问题讨论】:

  • 仅供参考,comma operator 一直存在于 ECMAScript 中,它对 ES6 来说并不新鲜。
  • 谢谢@FelixKling :-) 我现在在答案中包含了对逗号运算符的引用。
  • 确实有人想知道为什么编译器会费心创建_style 对象。好像很浪费他们可以初始化var style = {};,然后添加每个属性。

标签: javascript ecmascript-6 babeljs


【解决方案1】:

在 JavaScript 中,括号中的表达式,因为 comma operator,从左到右执行,最后一个表达式的结果将作为结果返回。例如,

console.log(
    (console.log(1), console.log(2), 3)
);

将打印 1、2 和 3 三行。最后一个值 3 作为表达式的结果返回,并由外部 console.log 打印。


同理,

var style = (
  _style = {},
  _style[namespace + 'box-sizing'] = 'border-box',
  _style[namespace + 'box-shadow'] = '10px 10px 5px #888888',
  _style
);

这里,

  _style = {},

创建一个对象并将其分配给_style

  _style[namespace + 'box-sizing'] = 'border-box',

创建一个新属性namespace + 'box-sizing' 并为其赋值,

  _style[namespace + 'box-shadow'] = '10px 10px 5px #888888',

同上,最后返回_style作为评估结果。

最后,您会得到一个具有两个属性并绑定到变量style 的对象。

【讨论】:

  • 啊哈.. the expressions in parenthesis are executed from left-right - 我想知道这是否是必要的括号。感谢您的回答!
猜你喜欢
  • 1970-01-01
  • 2018-07-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-10-30
  • 1970-01-01
相关资源
最近更新 更多