当前位置：首页 > article >正文

访问器属性getter和setter

article 2024/12/24 5:16:27

一.什么是getter和setter？

二.getter和setter的使用

1.对象字面量去定义

2.访问器属性的作用

2.1 计算属性

2.2 数据校验

3.通过Object.prototype.__defineGetter__()和Object.prototype.__defineSetter__()定义（不推荐）

4.通过Object.defineProperty() 方法去定义getter函数和setter函数

5.通过Object.defineProperties() 方法去定义getter函数和setter函数

一.什么是getter和setter？

对象的属性有两种，一种是数据属性，就是我们最常见的变量方法之类的。还有一种是访问器属性，它们本质上是获取或设置值时执行的函数，但使用起来更像是属性。

访问器属性由getter和setter表示,其中getter是获取属性值，setter是设置属性值。

二.getter和setter的使用

1.对象字面量去定义

在对象字面量中，它们通过get 关键字和set 关键字去定义。

    let obj = {
      _name: "于家宝",
      get name() { // getter去声明name属性，返回 _name 的值
        return this._name; // obj调用的getter函数，所以此时this指向obj
      },
    };
    console.log(obj.name); // 于家宝 使用时像数据属性那样，而不是obj.name()

我们在访问getter声明的访问器属性的时候，会自动调用getter函数，下面是getter函数的特点：

用于读取属性值。
定义时使用get关键字。
无参数，返回属性值。
使用的时候跟属性一样，不需要后面加（）。

如果想要修改getter声明的访问器属性，就必须使用setter函数，否则修改不会生效。

    let obj = {
      _name: "于家宝",
      get name() {
        return this._name;
      },
      set name(value) {  // setter用于修改访问器属性
        this._name = value;
      },
    };
    obj.name = 'yujiabao'
    console.log(obj.name); // yujiabao

我们在修改访问器属性的时候，会自动调用setter函数，下面是setter函数的特点：

用于修改属性值。
定义时使用set关键字。
必须有参数，参数就是给属性赋的值。

这个时候就完成了对一个访问器属性的声明，那这个访问器属性存在的意义是什么呢，单纯的使用数据属性不是更简单吗，下面我就说明以下访问器属性的作用。

2.访问器属性的作用

2.1 计算属性

我们可以通过访问器属性去实现计算属性的效果。

比如我现在声明一个对象，里面有两个属性，一个是姓氏，一个是名字。

let user = {
  name: "John",
  surname: "Smith"
};

现在需要添加一个fullName属性，该属性值由name和surname组成，就可以使用访问器属性。

    let user = {
      name: "John",
      surname: "Smith",
      get fullName() {
        return `${this.name} ${this.surname}`;
      },
    };
    console.log(user.fullName); // John Smith

此时修改name或者surname，fullName也会随之更新。

    let user = {
      name: "John",
      surname: "Smith",
      get fullName() {
        return `${this.name} ${this.surname}`;
      },
    };
    console.log(user.fullName); // John Smith
    user.name = "Alice";
    user.surname = "Cooper";
    console.log(user.fullName); // Alice Cooper

而且也可以通过修改fullName去反向修改name和surname。

    let user = {
      name: "John",
      surname: "Smith",
      get fullName() {
        return `${this.name} ${this.surname}`;
      },
      set fullName(value) {
        [this.name, this.surname] = value.split(" ");
      },
    };
    user.fullName = "Alice Cooper";
    console.log(user.name); // Alice
    console.log(user.surname); // Cooper
    console.log(user.fullName); // Alice Cooper

2.2 数据校验

我们在给变量赋值的时候可以通过get方法去添加一个校验。

    let person = {
      name: "于家宝",
      _age: 18,
      get age() {
        return this._age;
      },
      set age(value) {
        if (typeof value !== "number") {
          throw new Error("只能赋值数值型的值");
        }
        this._age = value;
      },
    };
    person.age = "18";

3.通过Object.prototype.defineGetter()和Object.prototype.defineSetter()定义（不推荐）

Object的原型对象上具有__defineGetter__()方法和__defineSetter__()方法，可以去定义getter函数和setter函数。

obj.__defineGetter__(prop,func)

作用：将一个对象的属性绑定到一个函数上，当访问这个属性的时候自动调用这个函数，一般用来定义getter函数。

参数：

prop：要定义或者修改的属性名，是一个字符串，这里是用于定义一个新的属性。
func：绑定的函数，当prop被访问的时候自动调用。

返回值：无。

    let person = {
      name: "于家宝",
      _age: 18,
    };
    person.__defineGetter__("age", function () {
      return this._age;
    });
    console.log(person.age);  // 18

obj__defineSetter__(prop,func)

作用：将一个对象的属性绑定到一个函数上，当给这个属性赋值的时候自动调用这个函数，一般用来定义setter函数。

参数：

prop：要修改或者定义的属性名，是一个字符串，这里是用于定义一个新的属性。
func：绑定的函数，当prop被赋值的时候自动调用。

返回值：无。

    let person = {
      name: "于家宝",
      _age: 18,
    };
    person.__defineGetter__("age", function () {
      return this._age;
    });
    person.__defineSetter__("age", function (value) {
      this._age = value;
    });
    console.log(person.age); // 18
    person.age = 19;
    console.log(person.age); // 19

4.通过Object.defineProperty() 方法去定义getter函数和setter函数

通过Object.defineProperty() 方法可以在对象上定义或者修改一个属性，并设置属性描述符，我们可以在这里设置其属性描述符get和set。

Object.defineProperty(obj,prop,descriptor)

作用：给目标对象定义或修改一个属性，并设置该属性的属性描述符。

参数：

obj：目标对象。
prop：要定义或者修改的属性名称，是个字符串。
descriptor：将被定义或者修改的属性描述符。

返回值：目标对象。

    let person = {
      name: "于家宝",
      _age: 18,
    };
    Object.defineProperty(person, "age", {
      get: function () {
        return this._age;
      },
      set: function (v) {
        this._age = v;
      },
    });
    console.log(person.age); // 18
    person.age = 19;
    console.log(person.age); // 19

5.通过Object.defineProperties() 方法去定义getter函数和setter函数

和Object.defineProperty() 方法差不多，只是这个方法可以同时设置多个属性。

Object.defineProperties(obj,props)

作用：给目标对象定义或修改一个或多个属性，并可以设置属性的属性描述符。

参数：

obj：目标对象。
props：一个对象，键值对是要设置的属性名和其属性描述符。

返回值：目标对象。

    let person = {
      _name: "于家宝",
      _age: 18,
    };
    Object.defineProperties(person, {
      name: {
        get: function () {
          return this._name;
        },
        set: function (v) {
          this._name = v;
        },
      },
      age: {
        get: function () {
          return this._age;
        },
        set: function (v) {
          this._age = v;
        },
      },
    });
    console.log(person.name); // 于家宝
    person.name = "yujiabao";
    console.log(person.name); // yujiabao
    console.log(person.age); // 18
    person.age = 19;
    console.log(person.age); // 19

查看全文

http://www.kler.cn/a/448875.html