首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript对象访问器

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

2024-06-05 08:30:28 作者：vilan_微澜

今天来聊一下JavaScript中的对象访问器,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访问器，所以为只读访问器属性。

四、总结

JavaScript 对象访问器是一项强大的功能，可增强你对对象属性的交互方式。通过使用 getter 和 setter，可以向对象属性添加封装、验证操作，还能定义计算和只读属性。了解和利用对象访问器可以生成更健壮、更干净和可维护性强的代码。

以上就是JavaScript对象访问器的工作原理及使用方法的详细内容，更多关于JavaScript对象访问器的资料请关注脚本之家其它相关文章！