JavaScript的对象访问器

什么是 JavaScript 对象访问器?

在 JavaScript 中,访问器是挂载在对象原生上的函数,可用于获取或设置对象的属性。与直接使用点号(.)操作符访问属性不同,访问器允许在访问或设置属性值时执行自定义逻辑。

访问器包含两种形式:gettersetter

  • getter(获取器) : 用于获取属性值的函数。
  • setter(设置器) : 用于设置属性值的函数。

对象访问器提供了一种控制属性访问和修改方式的方法。 在数据验证、封装和提供计算属性时非常有用。

如何使用对象访问器

我们可以通过对象字面量或使用 Object.defineProperty 方法来定义 getter 和 setter。方法

代码示例:

javascript 复制代码
let person = { // 创建一个对象person
    firstName: "张三", // 定义属性firstName,值为"张三"
    lastName: "李四", // 定义属性lastName,值为"李四"
    get fullName() { // 定义getter函数,用于获取fullName属性
        return `${this.firstName} ${this.lastName}`; // 返回firstName和lastName拼接后的字符串
    },
    set fullName(name) { // 定义setter函数,用于设置fullName属性
        let parts = name.split(' '); // 将传入的name字符串以空格分割成数组
        this.firstName = parts[0]; // 将数组的第一个元素赋值给firstName
        this.lastName = parts[1]; // 将数组的第二个元素赋值给lastName
    }
};

console.log(person.fullName); // 获取fullName属性,输出"张三 李四"
person.fullName = "王五 马六"; // 设置fullName属性,将firstName改为"王五",lastName改为"马六"
console.log(person.firstName); // 输出修改后的firstName,"王五"
console.log(person.lastName); // 输出修改后的lastName,"马六"

在这个例子中,fullName 是一个虚拟属性。它并不直接存在于对象中,而是根据 firstNamelastName 派生而来。

使用 Object.defineProperty

另一种定义 getter 和 setter 的方法是使用 Object.defineProperty

使用 Object.defineProperty 方法定义 getter 和 setter

示例

javascript 复制代码
let person = { // 创建一个对象person
    firstName: "张三", // 定义属性firstName,值为"张三"
    lastName: "李四" // 定义属性lastName,值为"李四"
};

Object.defineProperty(person, 'fullName', { // 使用Object.defineProperty方法为person对象定义fullName属性
    get: function() { // 定义getter函数,用于获取fullName属性
        return `${this.firstName} ${this.lastName}`; // 返回firstName和lastName拼接后的字符串
    },
    set: function(name) { // 定义setter函数,用于设置fullName属性
        let parts = name.split(' '); // 将传入的name字符串以空格分割成数组
        this.firstName = parts[0]; // 将数组的第一个元素赋值给firstName
        this.lastName = parts[1]; // 将数组的第二个元素赋值给lastName
    }
});

console.log(person.fullName); // 获取fullName属性,输出"张三 李四"
person.fullName = "王五 马六"; // 设置fullName属性,将firstName改为"王五",lastName改为"马六"
console.log(person.firstName); // 输出修改后的firstName,"王五"
console.log(person.lastName); // 输出修改后的lastName,"马六"

这里,使用 Object.definePropertyfullName 属性定义了 getter 和 setter。

使用访问器的优点

封装

访问器允许您隐藏对象的内部表示形式,同时提供更清晰的接口。这是面向对象编程中封装的基本原则。

验证

使用访问器进行数据验证

setter 可以用于在更新属性之前验证数据。这可以确保对象保持有效状态

示例

javascript 复制代码
let user = { // 创建一个对象user
    _age: 0, // 定义私有属性_age,值为0
    get age() { // 定义getter函数,用于获取age属性
        return this._age; // 返回_age的值
    },
    set age(value) { // 定义setter函数,用于设置age属性
        if (value < 0) { // 如果传入的值小于0
            console.log("年龄不能为负数"); // 输出错误信息
        } else { // 如果传入的值大于等于0
            this._age = value; // 将值赋给_age
        }
    }
};

user.age = -5; // 尝试设置age属性为负数,触发错误信息
user.age = 25; // 设置age属性为25
console.log(user.age); // 获取age属性,输出25

计算属性

getter 可以用于创建基于其他属性计算得出的属性。这在属性依赖于其他属性值的情况下非常有用。

使用 getter 创建计算属性

示例

javascript 复制代码
let rectangle = { // 创建一个对象rectangle
    width: 10, // 定义属性width,值为10
    height: 5, // 定义属性height,值为5
    get area() { // 定义getter函数,用于获取area属性
        return this.width * this.height; // 返回width和height的乘积
    }
};

console.log(rectangle.area); // 获取area属性,输出50

只读属性

可以通过仅定义 getter 来创建只读属性。

使用 getter 创建只读属性

示例

javascript 复制代码
let car = { // 创建一个对象car
    make: '丰田', // 定义属性make,值为"丰田"
    model: '凯美瑞', // 定义属性model,值为"凯美瑞"
    get description() { // 定义getter函数,用于获取description属性
        return `${this.make} ${this.model}`; // 返回make和model拼接后的字符串
    }
};

console.log(car.description); // 获取description属性,输出"丰田 凯美瑞"
car.description = '本田 雅阁'; // 尝试设置description属性,但不会生效
console.log(car.description); // 再次获取description属性,仍然输出"丰田 凯美瑞"

总结

JavaScript 对象访问器是一项强大特性,可以增加我们与对象属性交互的方式。 通过使用 getter 和 setter,我们可以为对象添加封装、验证、计算属性和只读属性的功能。

相关推荐
hackchen11 分钟前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
君子宜耘心12 分钟前
el-table虚拟列表封装
前端
黄瓜沾糖吃15 分钟前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟15 分钟前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
buibui16 分钟前
打包一个工具类
前端
巴别塔的饿灵18 分钟前
Webpack[TBC]
前端
LinHan18 分钟前
我的浏览器插件 Horizon-Hop 又又又更新啦!
前端
一个小潘桃鸭19 分钟前
需求:el-upload实现上传/粘贴图片功能
前端
胡清波20 分钟前
# vue 的 Diff 算法
前端·面试
浩龙不eMo20 分钟前
✅ Lodash 常用函数精选(按用途分类)
前端·javascript