当前位置：首页 > JavaScript

js实现getter

2026-04-05 16:55:58JavaScript

实现Getter的基本方法

在JavaScript中，Getter可以通过对象字面量或Object.defineProperty方法实现。对象字面量方式简洁，适合简单场景；Object.defineProperty更灵活，支持配置属性特性。

使用对象字面量定义Getter：

const obj = {
  _value: 42,
  get value() {
    return this._value;
  }
};
console.log(obj.value); // 输出42

使用Object.defineProperty定义Getter：

js实现getter

const obj = { _value: 42 };
Object.defineProperty(obj, 'value', {
  get: function() {
    return this._value;
  }
});
console.log(obj.value); // 输出42

在类中使用Getter

ES6类语法支持直接在类定义中使用Getter，适用于面向对象编程场景：

class MyClass {
  constructor() {
    this._value = 42;
  }

  get value() {
    return this._value;
  }
}

const instance = new MyClass();
console.log(instance.value); // 输出42

Getter与Setter结合使用

Getter常与Setter配对使用，实现对私有变量的受控访问：

js实现getter

const obj = {
  _value: 0,
  get value() {
    return this._value;
  },
  set value(newVal) {
    if (newVal >= 0) {
      this._value = newVal;
    }
  }
};

obj.value = 10;
console.log(obj.value); // 输出10
obj.value = -5; // 赋值无效
console.log(obj.value); // 仍输出10

计算属性Getter

Getter可以返回动态计算的值，而非简单返回存储值：

const circle = {
  radius: 5,
  get diameter() {
    return this.radius * 2;
  },
  get area() {
    return Math.PI * this.radius  2;
  }
};

console.log(circle.diameter); // 输出10
console.log(circle.area); // 输出约78.54

使用Proxy实现高级Getter

Proxy对象可以创建更灵活的Getter行为，包括处理不存在的属性：

const target = { _secret: 123 };
const handler = {
  get: function(obj, prop) {
    return prop in obj ? obj[prop] : `Property ${prop} not found`;
  }
};
const proxy = new Proxy(target, handler);

console.log(proxy._secret); // 输出123
console.logproxy.nonExistent); // 输出"Property nonExistent not found"