[學習es6]setter/getter探究

aboutU 發布于2019-08-21 14:42 / 1221人閱讀

摘要：加一個成員方法執行結果為注意到結果并沒有執行，因為我們直接訪問了，而不是只有定義只讀屬性當一個屬性只有沒有的時候，我們是無法進行賦值操作的第一次初始化也不行，這一點也是相當地坑。例如只有執行結果為當沒有和時，就可以正常讀寫屬性

1. 背景

在es6中，我們可以用class關鍵字來定義類，語法如下

class Person {
    // 構造函數
    constructor (name) {
        // 屬性初始化
        this.name = name;
    }

    // 成員方法
    sayName () {
        console.log(this.name);
    }
    
    // 靜態方法
    static sayHi () {
        console.log("Hi~");
    }
}

其實本質還是基于javascript原型鏈機制開發的語法糖，其中，本人對setter/getter進行一番研究，發現了不少坑。

2. 深入setter/getter 2.1 setter/getter的調用執行時機

class Person {
    constructor (name, age) {
        this.name = name;
        this.age = age;
    }
    set name (name) {
        console.log("setter");
        this.name = name;
    }
    get name () {
        console.log("getter");
        return this.name;
    }
}

var p = new Person("zhang", 25);

很快，我們就會發現代碼報錯了

到這里就可以明白了，原來只要this.name中的屬性名和set name/get name后面的name一致，對this.name就會調用setter/getter，也就是說setter/getter是hook函數，而真實的存儲變量是_name，我們可以在代碼中直接獲取它。

class Person {
    constructor (name, age) {
        this.name = name;
        this.age = age;
    }
    set name (name) {
        console.log("setter");
        this._name = name;
    }
    get name () {
        console.log("getter");
        return this._name;
    }

    // 加一個成員方法
    sayName () {
        console.log(this.name);
    }
}

var p = new Person("zhang", 25); 
console.log(p._name); // "zhang"

執行結果為

注意到結果并沒有執行getter，因為我們直接訪問了p._name，而不是p.name

2.2 只有getter定義只讀屬性

當一個屬性只有getter沒有setter的時候，我們是無法進行賦值操作的（第一次初始化也不行），這一點也是相當地坑。例如

class Person {
    constructor (name) {
        this.name = name;
    }
    // 只有getter
    get name () {
        console.log("getter");
        return this.name;
    }
}

var p = new Person("zhang");

執行結果為

當沒有getter和setter時，就可以正常讀寫屬性

GPU云服務器云服務器探究關于webrtc直播的探究 ES6 es6-系列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88003.html

ES6 Proxy/Reflect 淺析

摘要：即必須有返回值其中可接受三個參數，為目標對象，為屬性名，為實際接受的對象，默認為本例中新建的，如果單獨指出一個對象，可使指出對象受到相同的方法作用。且中的必須有返回值，的不用，這也正是因為在他之后還會執行所以不需要。 ES6 Proxy/Reflect Proxy 攔截器 proxy是es6的新特性，簡單來講，即是對目標對象的屬性讀取、設置，亦或函數調用等操作進行攔截（處理）。 let...

Juven 2019-08-20 14:14 評論0 收藏0
javascript基礎-Vue數據綁定前奏對象屬性

摘要：關于有人說我用刪除這個屬性不就好了之后打印發現它還是一只哈士奇。如下的解釋如下操作符會從某個對象上移除指定屬性。 javascript-Object-Property ? javascript-對象的屬性的延伸學習 showImg(https://segmentfault.com/img/bVNH2S?w=640&h=640); 前言在學習vue數據綁定的較底層原理時，被setter...

zebrayoung 2019-08-20 16:33 評論0 收藏0
深入淺出Vue響應式原理

摘要：總結最后我們依照下圖參考深入淺出，再來回顧下整個過程在后，會調用函數進行初始化，也就是過程，在這個過程通過轉換成了的形式，來對數據追蹤變化，當被設置的對象被讀取的時候會執行函數，而在當被賦值的時候會執行函數。前言 Vue 最獨特的特性之一，是其非侵入性的響應式系統。數據模型僅僅是普通的 JavaScript 對象。而當你修改它們時，視圖會進行更新。這使得狀態管理非常簡單直接，不過理解...

yiliang 2019-08-23 18:34 評論0 收藏0
JavaScript對象詳解

摘要：屬性描述符升級打怪必備技能對象有自己的屬性和方法，對于我們對象的屬性來講，屬性還有自己的屬性，又稱為屬性描述符。這個方法接受三個參數，第一個是指定的對象，第二個是指定的對象參數，第三個當然是要修改的屬性描述符了。對象的聲明有倆種：字面量通過new一個構造函數Object 兩者唯一的區別就是，字面量形式，可以一次賦值多個，通過new Object就得一個一個賦值數據類型 ...

fancyLuo 2019-08-26 12:14 評論0 收藏0
第二十九章：基于SpringBoot平臺使用Lombok來優雅的編碼

摘要：還提供了全部參數的構造函數的自動生成，該注解的作用域也是只有在實體類上，因為只有實體類才會存在構造函數。當然除了全部參數的構造函數，還提供了沒有參數的構造函數，使用方式與一致。 Lombok對于Java偷懶開發者來說應該是比較中意的，恰恰筆者就是一個喜歡在小細節上偷懶來提高開發效率的人。所以在技術框架的海洋里尋找了很久才在GitHub開源平臺上找到，而在這之前國外很多程序猿一直使用該框...

fanux 2019-08-15 11:59 評論0 收藏0