get属性是什么?有什么用?在什么场景用?get会被Json序列化?

在JavaScript中,对象的属性不仅可以是数据属性(即常规的键值对),还可以是访问器属性(accessor properties)。访问器属性不包含实际的数据值,而是定义了如何获取(get)和设置(set)一个值。这些操作由getter和setter函数执行。

get属性(getter)

get是一种定义在对象内部的函数,用于访问某个属性值时返回一个值。当你试图访问该属性时,getter函数会被自动调用。

使用方法:

const obj = {
  _value: 42,
  get value() {
    console.log("Getter is being called!");
    return this._value;
  }
};

console.log(obj.value); // 输出: "Getter is being called!" 然后输出: 42

get的作用:

  1. 计算属性:当对象的属性值取决于其他属性或某些外部因素时,可以使用getter。
  2. 验证和控制访问:当访问对象的某个属性时,可以使用getter来执行特定的验证或日志操作。
  3. 懒加载:只在首次访问属性时计算其值,并缓存该值以供后续使用。
  4. 代理属性:为对象的其他属性或外部数据源提供别名或特定的访问逻辑。

使用场景示例:

  1. 计算属性

    const circle = {
      radius: 5,
      get area() {
        return Math.PI * this.radius * this.radius;
      }
    };
    
    console.log(circle.area); // 输出圆的面积
    
  2. 控制属性访问

    const person = {
      _age: 0,
      get age() {
        return this._age;
      },
      set age(value) {
        if (value < 0) {
          console.warn("Age cannot be negative!");
        } else {
          this._age = value;
        }
      }
    };
    
    person.age = -5; // 输出警告: "Age cannot be negative!"
    
  3. 懒加载

    let expensiveObject = {
      _data: null,
      get data() {
        if (!this._data) {
          console.log("Fetching data...");
          this._data = "Expensive Data";
        }
        return this._data;
      }
    };
    
    console.log(expensiveObject.data); // "Fetching data..." 然后输出: "Expensive Data"
    console.log(expensiveObject.data); // 直接输出: "Expensive Data"(不再"Fetching data...")
    

综上,getter使我们能够对对象属性的访问进行更精细的控制,并提供计算、验证、日志记录、懒加载等功能。

get会被Json序列化?

在JavaScript的JSON序列化过程中,getset 的行为有所不同:

  1. get(getter):当你使用JSON.stringify方法序列化一个对象时,如果该对象的某个属性是通过getter定义的,那么getter会被调用,并且返回的值会被序列化到JSON字符串中。换句话说,getter的结果会被序列化。
const obj = {
  _value: 42,
  get value() {
    return this._value;
  }
};

const jsonString = JSON.stringify(obj); // 输出为'{"_value":42,"value":42}'

如上所示,尽管value属性是通过getter定义的,它的值(由getter返回的值)被正确地序列化到了JSON字符串中。

  1. set(setter):setter在JSON.stringify的序列化过程中不起作用,因为它与特定的值无关。setter只定义了如何设置某个属性的值,而不定义了要序列化的具体值。因此,setter本身不影响序列化的结果。

    const obj = {
      _value: 42,
      get value() {
        return this._value;
      },
      set value(val) {
        this._value = val;
      }
    };
    
    const jsonString = JSON.stringify(obj); // 输出依然为'{"_value":42,"value":42}'
    

总结:在JSON.stringify的序列化过程中,getter会被调用并将其返回的值序列化,而setter则被忽略。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值