JavaScript对象访问器的工作原理及使用方法_Javascript

一、前言

今天来聊一下javascript中的对象访问器。javascript的主要功能之一是能够定义对象，这些对象可以封装属性和方法，在与对象属性交互的各种方式中，访问器起着至关重要的作用。本文将深入探讨 javascript 对象访问器是什么、它是如何工作的以及使用对象访问器的作用。

二、什么是 javascript 对象访问器

javascript对象访问器是一种用于定义和操作对象属性的方法。它们由两个特殊函数组成：getter和setter。

getter：函数用于获取对象的属性值。当访问该属性时，getter函数会被调用，并返回相应的属性值。

setter：函数用于设置对象的属性值。当对属性进行赋值操作时，setter函数会被调用，并接受一个参数，即要设置的属性值。

例子：使用getter和setter比较典型的案例是vue.js中的依赖收集和触发依赖回调方法。

当读取对象属性时进行依赖收集；当对象属性值改变时，触发依赖回调方法。

1.定义对象访问器属性的两种方式

使用对象字面量的方式定义。
使用object.defineproperty方法定义。

1.1 使用对象字面量定义

下面是如何使用对象字面量方式定义 getter 和 setter 的示例：

let order = {
    firstname: "vilan",
    lastname: "liu",
    get fullname() {
        return `${this.firstname} ${this.lastname}`;
    },
    set fullname(value) {
        let namelist = value.split(' ');
        this.firstname = namelist[0];
        this.lastname = namelist[1];
    }
};

console.log(person.fullname); // vilan liu
person.fullname = "jack ma";
console.log(person.firstname); // jack
console.log(person.lastname); // ma

在当前示例中，fullname是一个访问器属性。你对firstname和lastname属性的修改将会间接影响到该属性的变化。

1.2使用object.defineproperty方法定义

下面是如何使用object.defineproperty方法定义访问器属性 的示例：

let person = {
    firstname: "vilan",
    lastname: "liu"
};

object.defineproperty(person, 'fullname', {
    get: function() {
        return `${this.firstname} ${this.lastname}`;
    },
    set: function(name) {
        let namelist = name.split(' ');
        this.firstname = namelist[0];
        this.lastname = namelist[1];
    }
});

console.log(person.fullname); // vilan liu
person.fullname = "jack ma";
console.log(person.firstname); // jack
console.log(person.lastname); // ma

在当前示例中，通过object.defineproperty定义了person对象的访问器属性fullname。

三、使用对象访问器的作用

1.属性封装和验证

对象访问器允许你隐藏对象的内部的私有属性，同时提供一个属性访问器让你能够正常去写私有属性，避免私有属性直接被修改而导致超出预期的错误。这在面向对象编程中也是经常使用的封装方式。

let user = {
    _wallet: 0,
    get wallet() {
        return this._wallet;
    },
    set wallet(value) {
        if (value <= 0) {
            console.error("钱包余额必须大于0！");
        } else {
            this._wallet = value;
        }
    }
};

user.wallet = -1; // 钱包余额必须大于0！
user.wallet = 1000000;
console.log(user.user); // 1000000

2.属性计算

getter可用于创建基于其他属性计算的属性。当一个属性依赖于其他属性的值时，这很有用。

let icecream = {
    price: 5,
    amount: 2,
    get subtotal() {
        return this.price * this.amount;
    }
};

console.log(icecream.subtotal); // 10

3.属性只读

可以使用 getter 创建只读属性，而无需定义 setter。

let rectangle = {
    width: 20,
    height: 10,
    get area() {
        return this.width * this.height;
    }
};

console.log(rectangle.area); // 200
rectangle.area = 100;
console.log(car.description); // 200

在该例子中area属性只设置了一个getter访问器，所以为只读访问器属性。