成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[學(xué)習(xí)es6]setter/getter探究

aboutU / 1228人閱讀

摘要：加一個(gè)成員方法執(zhí)行結(jié)果為注意到結(jié)果并沒有執(zhí)行，因?yàn)槲覀冎苯釉L問了，而不是只有定義只讀屬性當(dāng)一個(gè)屬性只有沒有的時(shí)候，我們是無法進(jìn)行賦值操作的第一次初始化也不行，這一點(diǎn)也是相當(dāng)?shù)乜印＠缰挥袌?zhí)行結(jié)果為當(dāng)沒有和時(shí)，就可以正常讀寫屬性

1. 背景

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

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

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

其實(shí)本質(zhì)還是基于javascript原型鏈機(jī)制開發(fā)的語法糖，其中，本人對(duì)setter/getter進(jìn)行一番研究，發(fā)現(xiàn)了不少坑。

2. 深入setter/getter 2.1 setter/getter的調(diào)用執(zhí)行時(shí)機(jī) 
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);

很快，我們就會(huì)發(fā)現(xiàn)代碼報(bào)錯(cuò)了

到這里就可以明白了，原來只要this.name中的屬性名和set name/get name后面的name一致，對(duì)this.name就會(huì)調(diào)用setter/getter，也就是說setter/getter是hook函數(shù)，而真實(shí)的存儲(chǔ)變量是_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;
    }

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

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

執(zhí)行結(jié)果為

注意到結(jié)果并沒有執(zhí)行g(shù)etter，因?yàn)槲覀冎苯釉L問了p._name，而不是p.name

2.2 只有g(shù)etter定義只讀屬性

當(dāng)一個(gè)屬性只有g(shù)etter沒有setter的時(shí)候，我們是無法進(jìn)行賦值操作的（第一次初始化也不行），這一點(diǎn)也是相當(dāng)?shù)?b>坑。例如

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

var p = new Person("zhang");

執(zhí)行結(jié)果為

當(dāng)沒有g(shù)etter和setter時(shí)，就可以正常讀寫屬性

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88003.html

相關(guān)文章

  • ES6 Proxy/Reflect 淺析

    摘要：即必須有返回值其中可接受三個(gè)參數(shù)，為目標(biāo)對(duì)象，為屬性名，為實(shí)際接受的對(duì)象，默認(rèn)為本例中新建的，如果單獨(dú)指出一個(gè)對(duì)象，可使指出對(duì)象受到相同的方法作用。且中的必須有返回值，的不用，這也正是因?yàn)樵谒筮€會(huì)執(zhí)行所以不需要。 ES6 Proxy/Reflect Proxy 攔截器 proxy是es6的新特性，簡單來講，即是對(duì)目標(biāo)對(duì)象的屬性讀取、設(shè)置，亦或函數(shù)調(diào)用等操作進(jìn)行攔截（處理）。 let...

    Juven 評(píng)論0 收藏0

  • javascript基礎(chǔ)-Vue數(shù)據(jù)綁定前奏對(duì)象屬性

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

    zebrayoung 評(píng)論0 收藏0

  • 深入淺出Vue響應(yīng)式原理

    摘要：總結(jié)最后我們依照下圖參考深入淺出，再來回顧下整個(gè)過程在后，會(huì)調(diào)用函數(shù)進(jìn)行初始化，也就是過程，在這個(gè)過程通過轉(zhuǎn)換成了的形式，來對(duì)數(shù)據(jù)追蹤變化，當(dāng)被設(shè)置的對(duì)象被讀取的時(shí)候會(huì)執(zhí)行函數(shù)，而在當(dāng)被賦值的時(shí)候會(huì)執(zhí)行函數(shù)。 前言 Vue 最獨(dú)特的特性之一，是其非侵入性的響應(yīng)式系統(tǒng)。數(shù)據(jù)模型僅僅是普通的 JavaScript 對(duì)象。而當(dāng)你修改它們時(shí)，視圖會(huì)進(jìn)行更新。這使得狀態(tài)管理非常簡單直接，不過理解...

    yiliang 評(píng)論0 收藏0

  • JavaScript對(duì)象詳解

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

    fancyLuo 評(píng)論0 收藏0

  • 第二十九章：基于SpringBoot平臺(tái)使用Lombok來優(yōu)雅的編碼

    摘要：還提供了全部參數(shù)的構(gòu)造函數(shù)的自動(dòng)生成，該注解的作用域也是只有在實(shí)體類上，因?yàn)橹挥袑?shí)體類才會(huì)存在構(gòu)造函數(shù)。當(dāng)然除了全部參數(shù)的構(gòu)造函數(shù)，還提供了沒有參數(shù)的構(gòu)造函數(shù)，使用方式與一致。 Lombok對(duì)于Java偷懶開發(fā)者來說應(yīng)該是比較中意的，恰恰筆者就是一個(gè)喜歡在小細(xì)節(jié)上偷懶來提高開發(fā)效率的人。所以在技術(shù)框架的海洋里尋找了很久才在GitHub開源平臺(tái)上找到，而在這之前國外很多程序猿一直使用該框...

    fanux 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<