成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

解讀Object.defineProperty()

wangbjun / 1136人閱讀

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

Object.defineProperty()解讀

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

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

方式一：使用最基礎(chǔ)的寫(xiě)法

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

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

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

/* 只要給obj.dataBind賦值，就會(huì)觸發(fā)set方法，只要訪問(wèn)ob.dataBind，就會(huì)觸發(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屬性是會(huì)替換obj的默認(rèn)的dataBind，如果有設(shè)置的話。

運(yùn)行

第二個(gè)栗子：實(shí)現(xiàn)階乘

代碼：



/*
*使用get/set特性實(shí)現(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;
    }
})

運(yùn)行

要改變屬性的get/set特性，有兩種方式：

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

obj:需要定義屬性的對(duì)象

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

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

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

get/set

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

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

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

get和set訪問(wèn)器可以不用定義，不定義也可以讀寫(xiě)屬性值。只定義get，則屬性是只讀。只定義set，則屬性是只寫(xiě)。

最后

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/94693.html

相關(guān)文章

  • javascript對(duì)象定義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 評(píng)論0 收藏0

  • 【Vue 2.0】核心源碼解讀 -- 不定期更新

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

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

  • 【用故事解讀 MobX 源碼（四）】裝飾器 和 Enhancer

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

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

  • 深入 JavaScript 原型繼承原理——babel 編譯碼解讀

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

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

  • Mobx 源碼閱讀簡(jiǎn)記

    摘要：源碼簡(jiǎn)記整體會(huì)寫(xiě)得比較亂，同時(shí)也比較簡(jiǎn)單，和讀書(shū)筆記差不多，基本是邊讀邊寫(xiě)。見(jiàn)諒主要三大部分的原子類(lèi)，能夠被觀察和通知變化，繼承于。同時(shí)里面有幾個(gè)比較重要的屬性與方法。 Mobx 源碼簡(jiǎn)記 整體會(huì)寫(xiě)得比較亂，同時(shí)也比較簡(jiǎn)單，和讀書(shū)筆記差不多，基本是邊讀邊寫(xiě)。見(jiàn)諒~ 主要三大部分Atom、Observable、Derivation Atom Mobx的原子類(lèi)，能夠被觀察和通知變化，obs...

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

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

0條評(píng)論

閱讀需要支付1元查看
<