JavaScript 绑定(bind)方法不适用于 getter 属性

Question

尝试这样做:

var c = {
  x: 'other context'
};

var o = {
  x: 'this context',
  get otherContext () {
    alert(this.x);
  }.bind(c)
};

o.otherContext;

但是我得到一个语法错误:

Uncaught SyntaxError: Unexpected token .

一个用例

您可能会问，为什么我可能想要更改 getter 的上下文。引导我来到这里的用例涉及创建一个可以检索 DOM 属性的辅助对象。助手是在另一个对象中定义的，该对象包含对我需要从中获取属性的 DOM 元素的引用。所以，这个辅助对象实际上只是一些 DOM 方法的代理，真的，我会做类似的事情:

var ViewObject = function () {
  this.el = document.getElementById('id');
  
  var proxy = {
    ...
    get left() {
      return this.el.offsetLeft
    }.bind(this)
    ...
  };
};

恕我直言，这是一个非常有效的用例。拥有父对象的 this 上下文的地方会很有用。 (也许代理功能可能更合适？嗯......我没有考虑过。仍然是 ES5 的 setter/getter 和 ES6 的代理，并且只由 evergreens 和 Edge 13+ 实现，我认为在 ES5 的范围内这个问题仍然非常非常适用。)

谁能给我一个合乎逻辑的解释(引用规范)为什么改变 getter 的上下文是非法的。

Answer 1

问题是 method syntax不使用函数表达式。它是一个定义好的句法结构。

MethodDefinition[Yield] :

PropertyName[?Yield] ( StrictFormalParameters ) { FunctionBody }

GeneratorMethod[?Yield]

get PropertyName[?Yield] ( ) { FunctionBody }

set PropertyName[?Yield] ( PropertySetParameterList ) { FunctionBody }

属性设置参数列表:

FormalParameter

因为它不是函数表达式，所以您无权访问函数方法或属性。

您可以使用 Object.defineProperty 完成您想要的.

var proxy = { ... };
Object.defineProperty(proxy, 'left', {
  get: function() {
    return this.el.offsetLeft;
  }.bind(this)
});