JavaScript 中 Getter 和 Setter 的用法详解

JavaScript Getter 和 Setter 基础概念

本文通过具体实例解析 JavaScript 中 getter 和 setter 的使用机制，旨在为读者提供清晰的技术参考。

在研究 Vue 计算属性时，官方文档指出：计算属性默认仅提供 getter，但在特定需求下，开发者也可以自定义 setter。

为了明确 getter 和 setter 的具体含义，本文查阅了相关技术资料进行说明。

在 ES5 标准中，可以使用 getter 和 setter 对默认操作进行部分重写，但这种机制仅适用于单个属性，无法直接应用于整个对象。其中，getter 是一个隐藏的函数，在读取属性值时自动触发；setter 同样作为隐藏属性存在，在赋值操作时自动执行。

ES5 中 Getter 的实现与测试

以下通过代码示例进行演示。

var myObject = {
  get a(){
    return 2
  }
  };
  Object.defineProperty(
  myObject,       //目标对象
  "b",          //属性名
  {  //描述符
    //给b设置一个getter
    get:function(){
    return this.a*2
     },
    //确保b会出现在对象的属性列表中
    enumerable:true
  }
);
console.log(myObject.a) //2
console.log(myObject.b) //4

使用在线 HTML/CSS/JavaScript 代码运行工具（http://tools.jb51.net/code/HtmlJsRun）执行上述代码，测试结果如下。

对象字面量与 defineProperty 的行为对比

无论是采用对象字面量语法中的 get a( ) { ...... }，还是在 defineProperty(......) 中显式定义，这两种方式都会在对象内部创建一个不直接存储值的属性。对该属性的访问会触发一个隐藏的函数，其返回值即作为属性访问的结果返回。（值得注意的是，myObject.a 无需添加执行括号；在 Vue 中，计算属性默认包含 getter，因此调用计算属性时不需要在末尾添加 "( )"）

var obj = {
  //给a定义一个getter
  get a(){
  return 2;
  }
};
obj.a = 3;
console.log(obj.a); //2

继续使用在线 HTML/CSS/JavaScript 代码运行工具（http://tools.jb51.net/code/HtmlJsRun）验证，测试结果如下。

Getter 限制与 Vue 计算属性关联

由于属性 a 仅定义了 getter，因此对 a 执行赋值操作时，系统会忽略该赋值行为且不会抛出错误。此外，即使存在合法的 setter，由于自定义的 getter 始终固定返回 2，此时执行 set 操作并无实际意义。

如需了解更多 JavaScript 相关内容，建议参考本站专题：《javascript面向对象入门教程》、《JavaScript常用函数技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。

希望本文的阐述能对读者的 JavaScript 程序设计工作有所帮助。