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