JavaScript中的get和set|极客笔记

JavaScript中的get和set

在JavaScript中，我们经常需要访问和修改对象的属性。有时候，我们希望对属性的访问和修改进行一些额外的逻辑处理，这个时候就可以使用get和set方法。

1. get方法

get方法用于获取对象的属性值，并返回该值。

let obj = {
  _name: "Tom",
  get name() {
    return this._name;
  }
};

console.log(obj.name); // 输出 "Tom"

上述代码中，我们定义了一个包含name属性和get方法的对象obj。在调用obj.name时，实际上是调用了get方法，并返回了_name属性的值。

需要注意的是，get方法在调用时不需要加括号，直接通过属性名来调用即可。

2. set方法

set方法用于设置对象的属性值。

let obj = {
  _name: "Tom",
  set name(newName) {
    this._name = newName;
  }
};

obj.name = "Jerry";
console.log(obj.name); // 输出 "Jerry"

上述代码中，我们定义了一个包含name属性和set方法的对象obj。在obj.name = "Jerry"这一行代码执行时，实际上是调用了set方法，并将”Jerry”作为参数传入。set方法中的参数就是新的属性值。

3. 使用get和set定义属性

除了在对象中直接定义get和set方法，还可以使用Object.defineProperty()方法来定义可读可写的属性。

let obj = {};

Object.defineProperty(obj, 'name', {
  get: function() {
    return this._name;
  },
  set: function(newName) {
    this._name = newName;
  }
});

obj.name = "Tom";
console.log(obj.name); // 输出 "Tom"

上述代码中，我们使用Object.defineProperty()方法来定义了一个名为name的属性，该属性包含get和set方法。在调用obj.name = "Tom"时，实际上是调用了set方法，并将”Tom”作为参数传入。在调用obj.name时，实际上是调用了get方法，返回了_name属性的值。

4. get和set方法的应用场景

get和set方法的应用场景有很多，下面列举其中几个常见的应用场景。

4.1 属性值的计算

get方法允许我们在获取属性值时进行一些计算，从而返回一个不同于属性实际存储值的结果。

let obj = {
  _height: 0,
  _width: 0,

  get area() {
    return this._height * this._width;
  },

  set height(newHeight) {
    this._height = newHeight;
  },

  set width(newWidth) {
    this._width = newWidth;
  }
};

obj.height = 5;
obj.width = 10;

console.log(obj.area); // 输出 "50"

上述代码中，我们定义了一个包含height和width属性以及area属性的对象obj。area属性的get方法返回height和width的乘积，实现了自动计算面积的功能。

4.2 属性值验证

set方法允许我们在设置属性值时进行一些验证操作，从而确保属性值的合法性。

let obj = {
  _age: 0,

  set age(newAge) {
    if (newAge >= 0 && newAge <= 120) {
      this._age = newAge;
    } else {
      console.log("年龄必须在0到120之间");
    }
  }
};

obj.age = 25; // 设置年龄为25
console.log(obj.age); // 输出 "25"

obj.age = 150; // 设置年龄为150，超出合法范围

上述代码中，我们定义了一个包含age属性的对象obj。在set方法中，我们对新的属性值进行了验证，只有当值在0到120之间时，才会将新的属性值赋给_age。在设置属性值时，如果传入的值不在合法范围内，会输出一条错误信息。

4.3 属性的保护

get和set方法可以用于保护对象属性的安全性，防止意外的修改。

function Circle(radius) {
  let _radius = radius;

  Object.defineProperty(this, 'radius', {
    get: function() {
      return _radius;
    },
    set: function(newRadius) {
      console.log("半径不可修改");
    }
  });
}

let circle = new Circle(5);
console.log(circle.radius); // 输出 "5"

circle.radius = 10; // 尝试修改半径

上述代码中，我们定义了一个Circle类，该类有一个私有属性_radius，并通过get方法提供了一个只读的radius属性。在set方法中，我们输出了一条提示信息，表示半径不可修改。

在实例化Circle类后，我们调用了circle.radius获取了半径值，并尝试修改半径，但是输出了一条提示信息，说明半径不可修改。