ES7 中的 Object.getOwnPropertyDescriptors 方法去获取对象的 getter/setter
在JavaScript中，当我们想要获取对象的属性时，通常会使用点操作符( . ) 或者方括号操作符( [] )。但是，这种方式有一个局限性，即不能获取对象的getter/setter属性。而在ES7中，新增了一个方法来解决这个问题，那就是Object.getOwnPropertyDescriptors()。
- Object.getOwnPropertyDescriptors()方法的介绍
Object.getOwnPropertyDescriptors()是ES7里面的一个新方法，它返回一个对象的所有属性描述符。这个方法的作用就是获取指定对象的所有自身属性（非继承而来的）的属性描述符。注意这里的是属性描述符，而不是简单的属性名或者属性值。这个方法返回的是一个对象，这个对象的键是对应的属性名，值是属性描述符对象。属性描述符包括以下几个属性：
- value：属性值。
- writable：布尔值，表示属性是否可写。
- enumerable：布尔值，表示属性是否可枚举。
- configurable：布尔值，表示属性是否可配置。
- get：获取属性的方法。
- set：设置属性的方法。
- 使用Object.getOwnPropertyDescriptors()方法获取getter/setter
接下来我们演示一下这个方法的用法，并结合实例来讲解如何使用这个方法来获取对象的getter/setter。
在下面的例子中，我们定义了一个对象person，这个对象有两个属性，一个是非get/set的属性name，一个是get/set的属性age。然后我们使用Object.getOwnPropertyDescriptors()方法来获取person对象的所有属性描述符，并使用console.log()方法打印出来。
let person = { name: "Jack", _age: 18, get age() { return this._age; }, set age(value) { if (value < 0 || value > 200) { console.log("invalid value for age"); return; } this._age = value; } };
let descriptors = Object.getOwnPropertyDescriptors(person); console.log(descriptors);
运行程序后，控制台输出如下：
{ name: { value: 'Jack', writable: true, enumerable: true, configurable: true }, _age: { value: 18, writable: true, enumerable: true, configurable: true }, age: { get: [Function: get age], set: [Function: set age], enumerable: true, configurable: true } }
我们可以发现，使用Object.getOwnPropertyDescriptors()方法返回的对象里面，age属性的描述符中包含了get和set方法的定义。
- 使用Object.getOwnPropertyDescriptors()方法深入理解get/set
在上一个例子中我们已经成功地使用Object.getOwnPropertyDescriptors()方法获取了一个对象的getter/setter。接下来我们针对一个有趣的案例来深入理解get/set的使用。
假如我们现在需要对一个员工的薪水进行计算，我们会需要用到一些类似于奖金、税收等计算公式。这些公式可以通过getter/setter来直接作用于员工对象上，方便快捷。
首先我们定义一个Employee类，包含姓名和薪水两个属性。为了防止员工的薪水被随意修改，我们实现了get/set。因为每个员工的薪水计算方法可能会不同，所以我们还可以通过setter方法来自定义员工的薪水计算规则。
class Employee { constructor(name, salary) { this.name = name; this._salary = salary; } get salary() { let bonus = this.calcBonus(); let tax = this.calcTax(bonus); return this._salary + bonus - tax; } set salary(value) { this._salary = value; } calcBonus() { return 500; } calcTax(bonus) { return bonus * 0.15; } }
在Employee类中，我们定义了一个protected的属性_salary和一个public的getter/setter函数salary。getter中除了常规的返回薪水金额之外，还包含了calcBonus()和calcTax()两个方法，用于计算员工的奖金和税收。这样实现的好处是，只需要在getter函数中加入相关的代码，便可以便捷地计算薪水的变化。
接下来我们来演示一下Employee类的使用方法：
let jack = new Employee("Jack", 1000); console.log(jack.salary); // 1350 // 更改基本薪资 jack.salary = 2000; console.log(jack.salary); // 2350 // 更改全局的奖金税收计算公式 Employee.prototype.calcBonus = function() { return 2000; } Employee.prototype.calcTax = function(bonus) { return bonus * 0.2; } console.log(jack.salary); // 3160
在这个例子中，我们创建了一个员工jack，并设置了他的基本薪资为1000。然后我们可以直接获取他的薪酬（同时也计算了奖金和税收），打印结果为1350。
接着，我们更改了jack的基本薪资，打印结果为2350。
最后，我们更改了全局的奖金税收计算公式，并再次打印jack的薪酬，打印结果为3160。
通过这个例子，我们可以清晰地了解到，使用getter/setter可以大大减少代码的重复写入，而Object.getOwnPropertyDescriptors()则可以非常便捷地获取对象中的getter/setter。
- 总结
通过本文的介绍，我们详细地了解了ES7中Object.getOwnPropertyDescriptors()方法的用法，结合实例也学习了getter/setter的应用。对于前端开发人员而言，熟练掌握这个方法和特性，可以提升代码的可读性和可维护性。另外，除了getter/setter属性，Object.getOwnPropertyDescriptors()方法还可以用于获取对象的其他属性描述符。如果在开发中遇到相关问题，读者可以参考本文例子，掌握get/set在对象中的应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66517910d3423812e4534a38