javascript - Babel 编译代码中的 this 语法是什么？

Question

我正在阅读 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 在结尾的括号之前。

Answer 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作为求值结果。

最后，您将获得一个具有两个属性的对象，该对象绑定(bind)到变​​量 style。