盤點JavaScript中Getter()和Setter()函數的使用
大家好，我是進階學習者。
一、前言
有兩種類型的屬性。
第一種是 數據屬性。已經知道如何使用它們了。到目前為止，使用過的所有屬性都是數據屬性。
第二種類型的屬性是新東西。它是 訪問器屬性(accessor properties)。它們本質上是用于獲取和設置值的函數，但從外部代碼來看就像常規屬性。
二、Getter 和 setter
訪問器屬性由 “getter” 和 “setter” 方法表示。在對象字面量中，它們用 get和 set表示：
- let obj = {
- get propName() { // 當讀取 obj.propName 時，getter 起作用
- }, set propName(value) {
- // 當執行 obj.propName = value 操作時，setter 起作用
- }};
當讀取 obj.propName時，getter 起作用，當 obj.propName被賦值時，setter 起作用。
例：
有一個具有 name和 surname屬性的對象 user：添加一個 fullName屬性，該屬性值應該為 "John Smith"。當然，不想復制粘貼已有的信息，因此可以使用訪問器來實現：
- let user = {
- name: "John",
- surname: "Smith",
- get fullName() {
- return `${this.name} ${this.surname}`;
- }
- };
- alert(user.fullName); // John Smith
從外表看，訪問器屬性看起來就像一個普通屬性。
這就是訪問器屬性的設計思想。不以函數的方式 調用 user.fullName，正常 讀取 它：getter 在幕后運行。
截至目前，fullName只有一個 getter。如果嘗試賦值操作 user.fullName=，將會出現錯誤：
- let user = {
- get fullName() {
- return `...`;
- }
- };
- user.fullName = "Test"; // Error（屬性只有一個 getter）
讓通過為 user.fullName添加一個 setter 來修復它：
- let user = {
- name: "John",
- surname: "Smith",
- get fullName() {
- return `${this.name} ${this.surname}`;
- },
- set fullName(value) {
- [this.name, this.surname] = value.split(" ");
- }
- };
- // set fullName 將以給定值執行
- user.fullName = "Alice Cooper";
- alert(user.name); // Alice
- alert(user.surname); // Cooper
現在，就有一個“虛擬”屬性。它是可讀且可寫的。
三、訪問器描述符
例：
要使用 defineProperty創建一個 fullName訪問器，可以使用 get和 set來傳遞描述符：
- let user = {
- name: "John",
- surname: "Smith"
- };
- Object.defineProperty(user, 'fullName', {
- get() {
- return `${this.name} ${this.surname}`;
- },
- set(value) {
- [this.name, this.surname] = value.split(" ");
- }
- });
- alert(user.fullName); // John Smith
- for(let key in user) alert(key); // name, surname
注：
一個屬性要么是訪問器(具有 get/set方法)，要么是數據屬性(具有 value)，但不能兩者都是。
四、更聰明的 getter/setter
Getter/setter 可以用作“真實”屬性值的包裝器，以便對它們進行更多的控制。
例：
如果想禁止太短的 user的 name，可以創建一個 setter name，并將值存儲在一個單獨的屬性 _name中：
- let user = {
- get name() {
- return this._name;
- },
- set name(value) {
- if (value.length < 4) {
- alert("Name is too short, need at least 4 characters");
- return;
- }
- this._name = value;
- }
- };
- user.name = "Pete";
- alert(user.name); // Pete
- user.name = ""; // Name 太短了……
注：
從技術上講，外部代碼可以使用 user._name直接訪問 name。但是，這兒有一個眾所周知的約定，即以下劃線 "開頭的屬性是內部屬性，不應該從對象外部進行訪問。
五、兼容性
訪問器的一大用途是，它們允許隨時通過使用 getter 和 setter 替換“正常的”數據屬性，來控制和調整這些屬性的行為。
開始使用數據屬性 name和 age來實現 user 對象：
- function User(name, age) {
- this.name = name;
- this.age = age;
- }
- let john = new User("John", 25);
- alert( john.age ); // 25
但情況可能會發生變化。
可能會決定存儲 birthday，而不是 age，因為它更精確，更方便：
現在應該如何處理仍使用 age屬性的舊代碼呢?
可以嘗試找到所有這些地方并修改它們，但這會花費很多時間，而且如果其他很多人都在使用該代碼，那么可能很難完成所有修改。
為 age添加一個 getter 來解決這個問題：
- function User(name, birthday) {
- this.name = name;
- this.birthday = birthday;
- // 年齡是根據當前日期和生日計算得出的
- Object.defineProperty(this, "age", {
- get() {
- let todayYear = new Date().getFullYear();
- return todayYear - this.birthday.getFullYear();
- }
- });
- }
- let john = new User("John", new Date(1992, 6, 1));
- alert(john.birthday); // birthday 是可訪問的
- alert(john.age); // ……age 也是可訪問的
現在舊的代碼也可以工作，而且還擁有了一個不錯的附加屬性。
六、總結
本文基于JavaScript基礎，介紹了getter 和 setter函數的使用。對于其中的屬性，通過案例的樣式，運行效果圖的展示，進行詳細的講解。同時拓展相對于的內容，希望能夠幫助你更好的理解。
歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
代碼很簡單，希望對你學習有幫助。
