JavaScript进阶----《getter 和 setter 是什么》G
最新回答
栖止你掌
2021-06-27 21:02:52
在前端开发的旅程中，我们经常会遇到一些看似简单的概念，比如getter和setter。这两个属性在学习JavaScript时可能并不陌生，但在实际应用中，理解它们的完整功能和正确使用场景却能极大地提升代码的可读性和维护性。本文将深入解析getter和setter的定义、使用方式以及在实际开发中的一些常见应用场景。
一.初次相遇的场景
在学习Vue框架时，我们可能会遇到这样一种实现方式，利用getter和setter来动态更新属性值。例如，在一个计算属性（computed）中，我们可能需要基于其他属性的值来计算一个新属性的值。这种情况下，getter和setter就发挥着关键作用。
二.对象属性的定义方法
在JavaScript中，我们可以通过以下方式定义一个对象属性：
javascript
let obj = {
name: 'Alice'
};
默认情况下，属性是可读写的。如果我们需要创建一个只读属性，即不允许修改其值，可以使用`Object.defineProperty`方法。
三.使用`Object.defineProperty`定义属性
通过`Object.defineProperty`，我们可以为对象添加或修改一个属性的特性，如可读性、可写性等。例如：
javascript
Object.defineProperty(obj, 'name', {
writable: false, // 禁止修改属性值
configurable: true, // 可以通过delete操作符删除
enumerable: true, // 可以在for-in循环中被遍历
value: 'Bob' // 初始值
});
四. value 和 writable
在`Object.defineProperty`的配置对象中，`value`用于设置属性的初始值，而`writable`属性则表示该属性是否可以被修改。默认情况下，`writable`为`true`，意味着属性是可以被修改的。如果将`writable`设置为`false`，则该属性就变成了只读属性。
五. getter 和 setter
在某些场景下，我们可能希望在访问或修改属性值时执行额外的操作。这时，getter和setter就派上了用场。getter用于在读取属性值时进行处理，而setter则用于在修改属性值时进行处理。
六. 实战应用
在Vue中，计算属性就是利用getter和setter来实现动态值的计算和更新。当我们需要基于其他属性的值来计算一个属性值时，可以使用计算属性来封装这部分逻辑。
七. 思考题
考虑下面的代码，解释为什么它会导致递归和栈溢出？
javascript
function factorial(n) {
if (n === 0) {
return 1;
} else {
return n * factorial(n - 1);
}
}
factorial(10);
解析：这段代码实现了一个递归求阶乘的函数。在递归调用中，函数不断地调用自身，每次调用都减小`n`的值。在实际执行时，当`n`减小到0时，递归调用结束。然而，在实际的JavaScript环境中，由于调用栈的限制（即每个函数调用都会占用栈空间），当递归调用的层数过多时，可能会超过系统的栈空间限制，从而导致栈溢出错误。解决这个问题的方法之一是采用迭代而非递归的方式实现阶乘计算。
热门标签
