没有花括号的 ES6 getter/方法答案

【问题标题】：ES6 getter/method without curly braces没有花括号的 ES6 getter/方法
【发布时间】：2017-07-21 06:52:23
【问题描述】：

我有一些由许多简短的 getter/方法组成的类。

例子：

get jQuery() {
  return this.pageConfig.jQuery || jQuery;
}

类似内容的箭头函数可以写成如下：

() => this.pageConfig.jQuery || jQuery;

这是一个单线，因此只占用 1/3 的垂直空间。

但它既不是getter也不是方法。

是否有推荐的以单行形式编写 getter/方法的方法？ （如果可能，不带花括号且不带 return 关键字）

我的 getter 和方法不需要修改对象。他们只是在阅读。

【问题讨论】：

通常，您不想使用箭头语法定义方法，因为这样您将无法获得 this 的值来指向您想要的对象上的方法的对象。请记住，箭头函数不仅是一种语法快捷方式，它们还使用词法 this，这不是您想要的对象方法。
你的第一个例子可以折叠成一行，如果你只需要这样的话。只需保留大括号和return 并将它们全部放在一行中。

标签： javascript typescript methods ecmascript-6 getter

【解决方案1】：

对于一个班轮，就这样吧：

get jQuery() {return this.pageConfig.jQuery || jQuery;}

箭头函数不适用于方法定义，因为它们使用词法this，而方法需要对象this。请记住，虽然箭头函数是一种很好的速记，但它们也会以通常与方法定义不兼容的方式影响 this 的值。

【讨论】：

【解决方案2】：

不，没有什么比（你可以跳过;）更短的了

get jQuery() { return this.pageConfig.jQuery || jQuery }

更多解释

你不能使用箭头函数（() => this.pageConfig.jQuery || jQuery），因为它不是一个 getter 函数，this 不是指对象的上下文，而是执行的上下文（可能是对象，但不是必须的。

有/曾经有 __defineGetter__ 函数 (some documentation) 允许您定义一个 getter。它现在已被弃用，可能会比get 更复杂。但正如文档所说，它被广泛使用并且可能永远不会被删除。

你很幸运：我完全支持疯狂的解决方案

class Test {
  
  constructor() {
    this.pageConfig = {}
    this.pageConfig.jQuery = "value"
    
    let properties = {
      'jQuery': () => this.pageConfig.jQuery || "Default",
      'text': () => this.pageConfig.text || "Default"
    }
    for(let prop in properties) this.__defineGetter__(prop, properties[prop])
    
  }
  
}

let t = new Test
console.log(t.jQuery)
console.log(t.text)

祝你好运（但老实说，只需使用 ECMA 5 中的 get）

【讨论】：

疯狂的解决方案。我喜欢：-D

【解决方案3】：

不错的单线解决方案：

readonly jQuery = this.pageConfig.jQuery || jQuery

它很短，表现得就像你对 getter 的期望一样，并且不需要花括号。

【讨论】：

【解决方案4】：

我正在考虑建立一个 babel 库来处理这个问题我觉得这样的东西看起来很花哨

const weekDays = [
            {
                day: 'Sunday',
                get input() {
                    return TimeRange(this.day)
                }
                // something like this
                // get input() => TimeRange(this.day)
            }
]

【讨论】：