一、前言

今天來聊一下JavaScript中的對(duì)象訪問器。JavaScript的主要功能之一是能夠定義對(duì)象，這些對(duì)象可以封裝屬性和方法，在與對(duì)象屬性 交互的各種方式中，訪問器起著至關(guān)重要的作用。本文將深入探討 JavaScript 對(duì)象訪問器是什么、它是如何工作的以及使用對(duì)象訪問器的作用。

二、什么是 JavaScript 對(duì)象訪問器

JavaScript對(duì)象訪問器是一種用于定義和操作對(duì)象屬性的方法。它們由兩個(gè)特殊函數(shù)組成：getter和setter。

getter：函數(shù)用于獲取對(duì)象的屬性值。當(dāng)訪問該屬性時(shí)，getter函數(shù)會(huì)被調(diào)用，并返回相應(yīng)的屬性值。

setter：函數(shù)用于設(shè)置對(duì)象的屬性值。當(dāng)對(duì)屬性進(jìn)行賦值操作時(shí)，setter函數(shù)會(huì)被調(diào)用，并接受一個(gè)參數(shù)，即要設(shè)置的屬性值。

例子：使用getter和setter比較典型的案例是vue.js中的依賴收集和觸發(fā)依賴回調(diào)方法。

當(dāng)讀取對(duì)象屬性時(shí)進(jìn)行依賴收集；當(dāng)對(duì)象屬性值改變時(shí)，觸發(fā)依賴回調(diào)方法。

1.定義對(duì)象訪問器屬性的兩種方式

• 使用對(duì)象字面量的方式定義。

• 使用Object.defineProperty方法定義。

1.1 使用對(duì)象字面量定義

下面是如何使用對(duì)象字面量方式定義 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

在當(dāng)前示例中，fullName是一個(gè)訪問器屬性。你對(duì)firstName和lastName屬性的修改將會(huì)間接影響到該屬性的變化。

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

在當(dāng)前示例中，通過Object.defineProperty定義了person對(duì)象的訪問器屬性fullName。

三、使用對(duì)象訪問器的作用

1.屬性封裝和驗(yàn)證

對(duì)象訪問器允許你隱藏對(duì)象的內(nèi)部的私有屬性，同時(shí)提供一個(gè)屬性訪問器讓你能夠正常去寫私有屬性，避免私有屬性直接被修改而導(dǎo)致超出預(yù)期的錯(cuò)誤。這在面向?qū)ο缶幊讨幸彩墙?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.屬性計(jì)算

getter可用于創(chuàng)建基于其他屬性計(jì)算的屬性。當(dāng)一個(gè)屬性依賴于其他屬性的值時(shí)，這很有用。

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屬性只設(shè)置了一個(gè)getter訪問器，所以為只讀訪問器屬性。

四、總結(jié)

JavaScript 對(duì)象訪問器是一項(xiàng)強(qiáng)大的功能，可增強(qiáng)你對(duì)對(duì)象屬性的交互方式。通過使用 getter 和 setter，可以向?qū)ο髮傩蕴砑?strong>封裝、驗(yàn)證操作，還能定義計(jì)算和只讀屬性。了解和利用對(duì)象訪問器可以生成更健壯、更干凈和可維護(hù)性強(qiáng)的代碼。

以上就是JavaScript對(duì)象訪問器的工作原理及使用方法的詳細(xì)內(nèi)容，更多關(guān)于JavaScript對(duì)象訪問器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論