JavaScript對象訪問器的工作原理及使用方法
一、前言
今天來聊一下JavaScript中的對象訪問器。JavaScript的主要功能之一是能夠定義對象，這些對象可以封裝屬性和方法，在與對象屬性 交互的各種方式中，訪問器起著至關重要的作用。本文將深入探討 JavaScript 對象訪問器是什么、它是如何工作的以及使用對象訪問器的作用。
二、什么是 JavaScript 對象訪問器
JavaScript對象訪問器是一種用于定義和操作對象屬性的方法。它們由兩個特殊函數(shù)組成：getter和setter。getter：函數(shù)用于獲取對象的屬性值。當訪問該屬性時，
getter函數(shù)會被調用，并返回相應的屬性值。setter：函數(shù)用于設置對象的屬性值。當對屬性進行賦值操作時，
setter函數(shù)會被調用，并接受一個參數(shù)，即要設置的屬性值。
例子：使用getter和setter比較典型的案例是vue.js中的依賴收集和觸發(fā)依賴回調方法。
當讀取對象屬性時進行依賴收集；當對象屬性值改變時，觸發(fā)依賴回調方法。
1.定義對象訪問器屬性的兩種方式
使用對象字面量的方式定義。
使用
Object.defineProperty方法定義。
1.1 使用對象字面量定義
下面是如何使用對象字面量方式定義 getter 和 setter 的示例：
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是一個訪問器屬性。你對firstName和lastName屬性的修改將會間接影響到該屬性的變化。
1.2使用Object.defineProperty方法定義
下面是如何使用Object.defineProperty方法定義訪問器屬性 的示例：
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.屬性封裝和驗證
對象訪問器允許你隱藏對象的內部的私有屬性，同時提供一個屬性訪問器讓你能夠正常去寫私有屬性，避免私有屬性直接被修改而導致超出預期的錯誤。這在面向對象編程中也是經(jīng)常使用的封裝方式。
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可用于創(chuàng)建基于其他屬性計算的屬性。當一個屬性依賴于其他屬性的值時，這很有用。
let iceCream = {
price: 5,
amount: 2,
get subtotal() {
return this.price * this.amount;
}
};
console.log(iceCream.subtotal); // 10
3.屬性只讀
可以使用 getter 創(chuàng)建只讀屬性，而無需定義 setter。
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 對象訪問器是一項強大的功能，可增強你對對象屬性的交互方式。通過使用 getter 和 setter，可以向對象屬性添加封裝、驗證操作，還能定義計算和只讀屬性。了解和利用對象訪問器可以生成更健壯、更干凈和可維護性強的代碼。
以上就是JavaScript對象訪問器的工作原理及使用方法的詳細內容，更多關于JavaScript對象訪問器的資料請關注腳本之家其它相關文章！
相關文章
返回數(shù)組中不重復的元素的js實現(xiàn)代碼。2009-12-12
JavaScript正則表達式校驗與遞歸函數(shù)實際應用實例解析
這篇文章主要介紹了JavaScript正則表達式校驗與遞歸函數(shù)實際應用,需要的朋友可以參考下2017-08-08
詳解webpack-dev-server 設置反向代理解決跨域問題
后端只負責接口，前端負責數(shù)據(jù)展示、邏輯處理。那么如何跨域？這篇文章主要介紹了webpack-dev-server 設置反向代理解決跨域問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
這篇文章主要介紹了js點擊事件鏈接的問題解決方法,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)碰撞檢測，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要介紹了JavaScript中字符串和字符串拼接操作的相關資料,文中通過示例代碼詳解講解了創(chuàng)建方式、不可變性及長度屬性,包括+、+=、concat()、模板字符串拼接方法,需要的朋友可以參考下2025-05-05
這篇文章主要為大家詳細介紹了JavaScript運動框架的第三部分，多物體任意值運動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
Layui數(shù)據(jù)表格之獲取表格中所有的數(shù)據(jù)方法
今天小編就為大家分享一篇Layui數(shù)據(jù)表格之獲取表格中所有的數(shù)據(jù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了JS二叉樹的簡單實現(xiàn)方法,結合具體實例形式分析了基于javascript定義二叉樹及二叉樹節(jié)點的遍歷、查找、添加、刪除及運算相關操作技巧,需要的朋友可以參考下2017-04-04
基于p5.js實現(xiàn)色彩輪和餅狀圖的動態(tài)可視化
這篇文章主要介紹了基于p5.js實現(xiàn)色彩輪和餅狀圖的動態(tài)可視化,文中給出了詳細的代碼,它適用于需要展示顏色信息或數(shù)據(jù)分布情況的場景,如設計、數(shù)據(jù)分析和教育領域,感興趣的朋友可以參考下2024-06-06