代码简洁之道:探究JavaScript对象访问器

一、前言

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

二、什么是 JavaScript 对象访问器

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

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

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

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

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

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

  1. 使用对象字面量的方式定义。

  2. 使用Object.defineProperty方法定义。

1.1 使用对象字面量定义

下面是如何使用对象字面量方式定义 gettersetter 的示例:

js 复制代码
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是一个访问器属性 。你对firstNamelastName属性的修改将会间接影响到该属性的变化。

1.2使用Object.defineProperty方法定义

下面是如何使用Object.defineProperty方法定义访问器属性 的示例:

js 复制代码
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.属性封装和验证

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

js 复制代码
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可用于创建基于其他属性计算的属性。当一个属性依赖于其他属性的值时,这很有用。

js 复制代码
let iceCream = {
    price: 5,
    amount: 2,
    get subtotal() {
        return this.price * this.amount;
    }
};

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

3.属性只读

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

js 复制代码
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 对象访问器是一项强大的功能,可增强你对对象属性的交互方式。通过使用 gettersetter,可以向对象属性添加封装、验证操作 ,还能定义计算和只读属性 。了解和利用对象访问器可以生成更健壮、更干净和可维护性强的代码。

相关推荐
web守墓人38 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L43 分钟前
CSS知识复习5
前端·css
许白掰44 分钟前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架