深入解析JavaScript属性的getter和setter

‍ 个人主页：《爱蹦跶的大A阿》

当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

​ 

​

✨ 前言

        在JavaScript中,对象属性除了直接设置值之外,还可以通过getter和setter方法来获取和设置属性值。这为属性操作提供了更大的灵活性。

        本文将详细介绍getter和setter的定义语法、使用场景以及一些注意事项,帮助大家全面理解这个非常有用的JavaScript对象特性。

​

✨ 正文

一、Getter和Setter的作用

Getter和Setter的作用主要有:

• 对属性值进行验证或者转换
• 延迟初始化对象属性
• 实现数据绑定
• 引入面向对象编程概念
• 屏蔽内部属性表示
• etc.

简单来说,getter和setter允许我们控制属性的读写操作。

二、定义Getter和Setter

定义getter和setter的语法如下:

const obj = {
  get propName() {
    // getter
  },

  set propName(value) {
    // setter
  }
};

也可以单独定义:

const value = 'Hello';

const obj = {
  get propName() {
    return value;
  }
}

 

这里propName看起来像是一个属性,但实际上调用 getter和setter方法。

使用Getter和Setter

定义了getter和setter后,读取和设置属性就会调用它们:

obj.propName = 'World'; // 调用setter

const result = obj.propName; // 调用getter

这为属性访问提供了额外的灵活性。

实现数据绑定

getter和setter可以实现数据绑定,例如实现一个用户信息对象:

let userData = {/*...*/}; 

let user = {
  get name() {
    return userData.name
  },

  set name(value) {
    userData.name = value;
  }
}

 通过getter和setter的中介作用,可以实现user.name与userData.name的绑定。

劫持属性访问

let value = 'hello';

let obj = {
  get prop() {
    return value;
  },
  
  set prop(val) {
    value = val;
  }
}

obj.prop的访问被劫持到了getter/setter中,可以进行控制。 

使用注意事项

使用getter和setter需要注意:

• 不要过度使用,需要时才使用
• 避免引入不必要的函数调用开销
• getter和setter中的this需要留意
• 需要合理制定访问权限
• 理解它们的语义而不是直接暴露属性

✨ 结语

       Getter和Setter为JavaScript带来了面向对象编程及数据隐藏封装的能力。合理使用可以让代码更具弹性并提高可维护性。

        本文详细介绍了它们的定义语法、使用方式以及实现数据绑定的实例。希望本文可以帮助大家深入理解这一非常有用的JavaScript对象特性。

 

​