当前位置:首页 > JavaScript

js实现getter

2026-02-01 00:34:57JavaScript

JavaScript 实现 Getter

在 JavaScript 中,Getter 是一种特殊的对象属性访问器,用于在访问属性时执行自定义逻辑。Getter 通常与 Setter 配对使用,但也可以单独定义。

使用对象字面量定义 Getter

在对象字面量中,可以通过 get 关键字定义 Getter:

js实现getter

const obj = {
  _value: 42,
  get value() {
    return this._value;
  }
};

console.log(obj.value); // 输出: 42

使用 Object.defineProperty 定义 Getter

通过 Object.defineProperty 方法可以在现有对象上动态添加 Getter:

const obj = { _value: 42 };

Object.defineProperty(obj, 'value', {
  get: function() {
    return this._value;
  },
  enumerable: true,
  configurable: true
});

console.log(obj.value); // 输出: 42

在类中定义 Getter

在 ES6 类中,Getter 可以像普通方法一样定义:

js实现getter

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

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

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

Getter 计算属性

Getter 可以用于动态计算属性值:

const circle = {
  radius: 10,
  get diameter() {
    return this.radius * 2;
  }
};

console.log(circle.diameter); // 输出: 20

Getter 的注意事项

Getter 不能接受参数,如果尝试传递参数会报错。如果需要参数化访问,应该使用方法而不是 Getter。

Getter 常用于封装内部状态,提供更安全的访问方式,或者在访问属性时执行额外逻辑(如日志记录、验证等)。

标签: jsgetter
分享给朋友:

相关文章

js实现

js实现

JavaScript 实现方法 JavaScript 是一种广泛使用的编程语言,适用于网页开发、服务器端编程以及移动应用开发。以下是几种常见的 JavaScript 实现方法: 网页交互功能 使用…

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-contain…

js实现复制功能

js实现复制功能

使用 document.execCommand 方法 这种方法适用于较旧的浏览器,但在现代浏览器中可能被逐步淘汰。通过创建一个临时的 textarea 元素,将文本内容放入其中,然后执行复制命令。…

js 实现vue

js 实现vue

Vue.js 的基本实现 在 JavaScript 中实现 Vue.js 的核心功能,可以通过数据绑定、响应式系统和虚拟 DOM 来实现。以下是实现 Vue.js 核心功能的简化版本。 数据响应式系…

js实现pdf在线预览

js实现pdf在线预览

使用PDF.js实现PDF在线预览 PDF.js是由Mozilla开发的一个开源JavaScript库,可以在网页中直接渲染PDF文件。以下是实现PDF在线预览的步骤: 引入PDF.js库 在HT…

js实现换肤

js实现换肤

使用CSS变量实现换肤 通过CSS变量可以轻松实现主题切换功能。CSS变量在根元素中定义,通过JavaScript动态修改这些变量值。 :root { --primary-color: #349…