ES6通过箭头函数实现getter/setter

9 浏览
0 Comments

ES6通过箭头函数实现getter/setter

我正在使用babel6，为我的宠物项目创建一个XMLHttpRequest包装器，对于我可以使用的方法：

open = (method, url, something) => {
  return this.xhr.open(method, url, something);
}

但对于属性，箭头函数不起作用

这个可行：

get status() { return this.xhr.status; }

但我不能使用

get status = () => this.xhr.status;

这是有意的吗？

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

被接受的回答非常棒。如果您愿意使用普通函数语法/对象初始化/ MethodDefinition 语法（例如 get NAME () { BODY }），而不是紧凑的“箭头函数语法”，那么它是最佳选择。

但也许你真的喜欢箭头函数；也许你使用箭头函数的另一个原因无法用普通函数语法替代；你可能需要一个不同的解决方案。

例如，我注意到 OP 使用了 this，您可能希望通过“非绑定的 this”（即“词法绑定”）对 this 进行绑定，并且箭头函数非常适合进行词法绑定。

您仍然可以通过 Object.defineProperty 技术使用箭头函数来获取属性。

{
  ...
  Object.defineProperty(your_obj, 'status', { 
     get : () => this.xhr.status 
  });
  ...
}

请参阅有关对象初始化技术（也称为 get NAME() {...}）与 defineProperty 技术（也称为 get : ()=>{}）的提及。至少有一个重要区别，即使用 defineProperty 需要确保变量已经存在：

在现有对象上定义 getter

即使用 Object.defineProperty，您必须确保您的_obj（在我的示例中）存在并保存在变量中（而在对象初始化中，您可以在对象初始化中返回一个对象文字：{...， get(){ }，...}）。有关 Object.defineProperty 的更多信息，请单击此处

正如一位评论者所说，Object.defineProperty(...) 也很好，因为您可以在循环中运行代码（即定义多个属性）

Object.defineProperty(...) 看起来与 get NAME(){...} 语法具有可比的浏览器支持; 现代浏览器，IE9。

0
0 Comments

根据ES2015的语法规定，对象字面量上的属性只可能是以下三种类型之一：

属性定义：

  • 标识符引用
  • 属性名 : 赋值表达式
  • 方法定义

这三种类型中唯一允许以 get 开头的是方法定义：

方法定义：

  • 属性名 ( 严格形式参数列表 ) { 函数体 }
  • 生成器方法
  • get 属性名 ( ) { 函数体 }
  • set 属性名 ( 属性设置参数列表 ) { 函数体 }

可以看到，get 的形式遵循非常有限的语法，必须是以下形式：

get NAME () { BODY }

该语法不允许以 get NAME = ... 形式的函数存在。

0