Question

无法使用基于箭头函数的方法重现MDN's example（«以类似数组的方式使用对象»）。

> let obj = {
... length: 0,
... addEl: el => [].push.call(this, el={}) //default argument
... };

它很重要但是......什么？它肯定会在某处存储递增值，但在哪里？

> obj.addEl();
1
> obj.addEl({});
2
> obj
{ length: 0, addEl: [Function: addEl] } // array function «this» problem?

原始变体以正确的方式递增长度，但它也会创建新属性。在这个例子中没有任何关于它的内容。

addEl: function (el) { [].push.call(this, el) }
...
// the function in work
> anotherObj.addEl();
> anotherObj.addEl('new');
> anotherObj
{ '0': undefined,
  '1': 'new',
  length: 2,
  addEl: [Function: addEl] }

可以吗？如果是这样，我猜，它应该被称为“创建类似数组的对象”，这不仅意味着长度属性，也意味着数字键。相关的，已经回答的问题是here。

Answer 1

递增值存储在window中，因为箭头函数不绑定this。它们的this值是封闭范围的值，在本例中是全局范围。例如：

let obj = {
  length: 0,
  addEl: el => [].push.call(this, el={}) //default argument
};

console.log(obj.addEl());
console.log(window.length);

window.length是递增值。 obj.addEl()返回递增值的原因是Array#push返回新的length。如果您记录window[0]，您将获得推送到this的默认参数，即window：

> window[0]
< {}

常规函数表达式的行为不同的原因是它们绑定到对象obj，因此this在与obj相对的常规函数表达式中引用window箭头功能。

Answer 2

这是因为你正在使用不绑定它的箭头函数，使用普通函数会给你结果。

addEl: el => [].push.call(this, el={})

在您的情况下，

此引用全局窗口对象

使用箭头函数作为一种方法意外地产生：MDN的示例与[] .push.call（）

2 个答案: