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

資訊專欄INFORMATION COLUMN

解讀Object.defineProperty()

wangbjun / 1100人閱讀

摘要:默認(rèn)情況下,使用添加的屬性是不可變的。是讀取屬性時調(diào)用,一般要返回,是寫入屬性時調(diào)用,不用返回。和訪問器不是對象的屬性,而是屬性的特性,特性只有在內(nèi)部才會使用,也就是接口不會暴露。只定義,則屬性是只讀。

Object.defineProperty()解讀

第一個栗子:實現(xiàn)js雙向數(shù)據(jù)綁定(借用網(wǎng)上的例子)

首先,將結(jié)構(gòu)先搭建好

    
    

方式一:使用最基礎(chǔ)的寫法

document.addEventListener("keyup", function (e) {
    var str = e.target.value||"";
    document.getElementById("txt1").value = str;
    document.getElementById("txt2").value = str;
})

該方法使用主動賦值的方式同步數(shù)據(jù)

方式二:Object.defineProperty()
將所有的監(jiān)聽和響應(yīng)操作交給Object的自定義存取器屬性,先看實現(xiàn)的代碼,稍后具體解讀2333333

/* 只要給obj.dataBind賦值,就會觸發(fā)set方法,只要訪問ob.dataBind,就會觸發(fā)get方法 */
var obj = {};
Object.defineProperty(obj, "dataBind", {
    get: function () {
        return this.newValue;
    },
    set: function (newValue) {
        this.newValue = newValue || "";
        document.getElementById("txt1").value = this.newValue;
        document.getElementById("txt2").value = this.newValue;
    }
})
document.addEventListener("keyup", function (e) {
    obj.dataBind = e.target.value;  /*這步操作是調(diào)用obj.dataBind.set(e.target.value)*/
})

這里的dataBind屬性是會替換obj的默認(rèn)的dataBind,如果有設(shè)置的話。

運行

第二個栗子:實現(xiàn)階乘

代碼:


/*
*使用get/set特性實現(xiàn)階乘功能
*/ 
var obj = {};
Object.defineProperty(obj,"factorial",{
    get:function(){
        return this.result;
    },
    set:function(num){
        this.result = 1;
        for(var i=1;i<=num;i++){
            this.result *= i;
        }
    }
})

document.addEventListener("keydown",function(e){
    var even = e||event;
    if(even.keyCode==13){
        obj.factorial = document.getElementById("factorial").value;
        document.getElementsByTagName("p")[0].innerText = "階乘的結(jié)果是:"+obj.factorial;
    }
})

運行

要改變屬性的get/set特性,有兩種方式:

設(shè)置單個屬性:Object.defineProperty()
該方法會直接在一個對象上定義一個新屬性,或者修改一個對象的現(xiàn)有屬性,并返回這個對象。
默認(rèn)情況下,使用Object.defineProperty添加的屬性是不可變的。
語法:Object.defineProperty(obj,prop,descriptor)

obj:需要定義屬性的對象

prop:需要定義或修改的屬性名

descriptor:被定義或修改的屬性描述

設(shè)置多個屬性O(shè)bject.defineProperties()
語法: Object.defineProperties(obj, props)

get/set

get和set屬性稱為“存取器屬性”,當(dāng)屬性被定義為存取器屬性時,js會忽略賦值的屬性,直接使用定義的get或set的值。

get是讀取屬性時調(diào)用,一般要返回,set是寫入屬性時調(diào)用,不用返回。

get和set訪問器不是對象的屬性,而是屬性的特性,特性只有在內(nèi)部才會使用,也就是接口不會暴露。

get和set訪問器可以不用定義,不定義也可以讀寫屬性值。只定義get,則屬性是只讀。只定義set,則屬性是只寫。

最后

我是參考網(wǎng)上很多例子,按照自己的思路整理出來的,可能也會有很多疏漏,先這樣吧
竟然學(xué)會了用gif圖演示,哈哈哈

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

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/94693.html

相關(guān)文章

  • javascript對象定義set和get的方式解讀!~

    摘要:方式使用原始的和標(biāo)記設(shè)置方式使用原型方法進(jìn)行設(shè)置使用和進(jìn)行設(shè)置 /** * 方式1:使用原始的set 和 get標(biāo)記設(shè)置 * @type {Object} */ var obj1 = { name: shaanxi, get nameGet() { return this.name; ...

    godlong_X 評論0 收藏0
  • 【Vue 2.0】核心源碼解讀 -- 不定期更新

    摘要:觀察員由模板解析指令創(chuàng)建的觀察員負(fù)責(zé)模板中的更新視圖操作。觀察員種類目前了解情況來看主要分三類視圖指令的計算屬性的用戶自定義的 介紹 關(guān)于 Vue.js 的原理一直以來都是一個話題。經(jīng)過幾天的源碼學(xué)習(xí)和資料介紹,我將一些個人理解的經(jīng)驗給寫下來,希望能夠與大家共勉。 附上GITHUB源碼地址, 如果有任何不解 可以在 文章下面提出或者寫下issue, 方便大家回答和學(xué)習(xí), 有興趣可以St...

    sunsmell 評論0 收藏0
  • 【用故事解讀 MobX 源碼(四)】裝飾器 和 Enhancer

    摘要:所以這是一篇插隊的文章,用于去理解中的裝飾器和概念。因此,該的作用就是根據(jù)入?yún)⒎祷鼐唧w的描述符。其次局部來看,裝飾器具體應(yīng)用表達(dá)式是,其函數(shù)簽名和是一模一樣。等裝飾器語法,是和直接使用是等效等價的。 ================前言=================== 初衷:以系列故事的方式展現(xiàn) MobX 源碼邏輯,盡可能以易懂的方式講解源碼; 本系列文章: 《【用故事解...

    maybe_009 評論0 收藏0
  • 深入 JavaScript 原型繼承原理——babel 編譯碼解讀

    摘要:目錄無繼承簡單的字段聲明無繼承簡單的方法聲明簡單繼承一層繼承字段覆蓋無繼承靜態(tài)函數(shù)無繼承靜態(tài)變量神秘的類無繼承簡單的字段聲明先來看個最簡單的例子,我們僅僅使用了關(guān)鍵字并定義了一個變量最后編譯出來的代碼如下。無繼承靜態(tài)變量還有個小例子。 在[上一篇文章][]中,我們提到 ES6 的 class 語法糖是個近乎完美的方案,并且講解了實現(xiàn)繼承的許多內(nèi)部機(jī)制,如 prototype/__pro...

    stdying 評論0 收藏0
  • Mobx 源碼閱讀簡記

    摘要:源碼簡記整體會寫得比較亂,同時也比較簡單,和讀書筆記差不多,基本是邊讀邊寫。見諒主要三大部分的原子類,能夠被觀察和通知變化,繼承于。同時里面有幾個比較重要的屬性與方法。 Mobx 源碼簡記 整體會寫得比較亂,同時也比較簡單,和讀書筆記差不多,基本是邊讀邊寫。見諒~ 主要三大部分Atom、Observable、Derivation Atom Mobx的原子類,能夠被觀察和通知變化,obs...

    paulli3 評論0 收藏0

發(fā)表評論

0條評論

wangbjun

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<