做网站实例,比较好的设计网站推荐,企业网站建设 百度文库,网页制作与网站建设技术大全在JavaScript中#xff0c;对象的属性不仅可以是数据属性#xff08;即常规的键值对#xff09;#xff0c;还可以是访问器属性#xff08;accessor properties#xff09;。访问器属性不包含实际的数据值#xff0c;而是定义了如何获取#xff08;get#xff09;和设…在JavaScript中对象的属性不仅可以是数据属性即常规的键值对还可以是访问器属性accessor properties。访问器属性不包含实际的数据值而是定义了如何获取get和设置set一个值。这些操作由getter和setter函数执行。
get属性getter
get是一种定义在对象内部的函数用于访问某个属性值时返回一个值。当你试图访问该属性时getter函数会被自动调用。
使用方法
const obj {_value: 42,get value() {console.log(Getter is being called!);return this._value;}
};console.log(obj.value); // 输出: Getter is being called! 然后输出: 42get的作用
计算属性当对象的属性值取决于其他属性或某些外部因素时可以使用getter。验证和控制访问当访问对象的某个属性时可以使用getter来执行特定的验证或日志操作。懒加载只在首次访问属性时计算其值并缓存该值以供后续使用。代理属性为对象的其他属性或外部数据源提供别名或特定的访问逻辑。
使用场景示例 计算属性 const circle {radius: 5,get area() {return Math.PI * this.radius * this.radius;}
};console.log(circle.area); // 输出圆的面积控制属性访问 const person {_age: 0,get age() {return this._age;},set age(value) {if (value 0) {console.warn(Age cannot be negative!);} else {this._age value;}}
};person.age -5; // 输出警告: Age cannot be negative!懒加载 let expensiveObject {_data: null,get data() {if (!this._data) {console.log(Fetching data...);this._data Expensive Data;}return this._data;}
};console.log(expensiveObject.data); // Fetching data... 然后输出: Expensive Data
console.log(expensiveObject.data); // 直接输出: Expensive Data不再Fetching data...综上getter使我们能够对对象属性的访问进行更精细的控制并提供计算、验证、日志记录、懒加载等功能。
get会被Json序列化
在JavaScript的JSON序列化过程中get 和 set 的行为有所不同
getgetter当你使用JSON.stringify方法序列化一个对象时如果该对象的某个属性是通过getter定义的那么getter会被调用并且返回的值会被序列化到JSON字符串中。换句话说getter的结果会被序列化。
const obj {_value: 42,get value() {return this._value;}
};const jsonString JSON.stringify(obj); // 输出为{_value:42,value:42}如上所示尽管value属性是通过getter定义的它的值由getter返回的值被正确地序列化到了JSON字符串中。 setsettersetter在JSON.stringify的序列化过程中不起作用因为它与特定的值无关。setter只定义了如何设置某个属性的值而不定义了要序列化的具体值。因此setter本身不影响序列化的结果。 const obj {_value: 42,get value() {return this._value;},set value(val) {this._value val;}
};const jsonString JSON.stringify(obj); // 输出依然为{_value:42,value:42}总结在JSON.stringify的序列化过程中getter会被调用并将其返回的值序列化而setter则被忽略。
