accessor(访问器)——JavaScript

558 阅读2分钟

accessor(访问器)是ES5的属性,定义了语言的特性及行为。

🆗那么存在即合理

ES5之前,JS中只有数据属性(data property),用于存储和访问数据。但是未来更好的控制属性的访问和修改,ES5引入了访问器属性

访问器属性由 getter 和 setter 方法表示,它们允许在读取和设置属性值时执行自定义的操作。在对象字面量中,可以使用 get 和 set 关键字来定义访问器属性

var obj={
  get propName(){
    //在访问器属性中使用下划线是一种常见的命名约定
    //用于表示属性的内部实现细节,用来区分访问器属性和普通属性
    return this._propName;
  },
  set propName(value){
    this._propName=value
  }
}
obj.propName="HeDudu";//调用setter方法
console.log(obj.propName)//调用getter方法,输出HeDudu

在这个示例中propName 是一个访问器属性,它使用 getter 和 setter 方法来控制属性值的读取和设置。

OK,这里有一道题

class C{
    accessor x=1;
}

提问:使用accessor来定义变量和使用let/cosnt/var定义变量有什么区别? 这里涉及到一个数据属性和访问器属性的区别。

  • 数据属性就是直接存储属性的值,而访问器属性是使用setter、getter函数来获取和设置属性的值。可以在获取和设置属性值时执行自定义的逻辑。
  • 数据属性的特性包括configurable、enumerable、writable和value,而访问器属性的特性包括configurable、enumerable、get和set。
  • 数据属性适用于存储简单的数据值,而访问器属性适用于需要在读取和写入属性时执行特定操作的情况

以上代码的运行大概是这样的


"use strict";

class C {
    #x_accessor_storage = 1;
    get x() { return this.#x_accessor_storage;  }
    set x(value) { this.#x_accessor_storage = value; }
}

除此之外,accessor命令前面,还可以加上static命令和private命令

class C{
static accessor x=1;
accessor #y=2;
}