解讀Object.defineProperty()

wangbjun 發布于2019-08-22 16:49 / 1093人閱讀

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

Object.defineProperty()解讀

第一個栗子：實現js雙向數據綁定(借用網上的例子)

首先，將結構先搭建好

方式一：使用最基礎的寫法

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

該方法使用主動賦值的方式同步數據

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

/* 只要給obj.dataBind賦值，就會觸發set方法，只要訪問ob.dataBind，就會觸發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;  /*這步操作是調用obj.dataBind.set(e.target.value)*/
})

這里的dataBind屬性是會替換obj的默認的dataBind，如果有設置的話。

運行

第二個栗子：實現階乘

代碼：

/*
*使用get/set特性實現階乘功能
*/ 
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 = "階乘的結果是："+obj.factorial;
    }
})

運行

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

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

obj:需要定義屬性的對象

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

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

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

get/set

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

get是讀取屬性時調用，一般要返回，set是寫入屬性時調用，不用返回。

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

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

最后

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

GPU云服務器云服務器報告解讀解讀源碼解讀解讀3

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

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

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

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

godlong_X 2019-08-20 15:42 評論0 收藏0
【Vue 2.0】核心源碼解讀 -- 不定期更新

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

sunsmell 2019-08-21 16:51 評論0 收藏0
【用故事解讀 MobX 源碼（四）】裝飾器和 Enhancer

摘要：所以這是一篇插隊的文章，用于去理解中的裝飾器和概念。因此，該的作用就是根據入參返回具體的描述符。其次局部來看，裝飾器具體應用表達式是，其函數簽名和是一模一樣。等裝飾器語法，是和直接使用是等效等價的。 ================前言=================== 初衷：以系列故事的方式展現 MobX 源碼邏輯，盡可能以易懂的方式講解源碼；本系列文章：《【用故事解...

maybe_009 2019-08-22 18:30 評論0 收藏0
深入 JavaScript 原型繼承原理——babel 編譯碼解讀

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

stdying 2019-08-23 12:35 評論0 收藏0
Mobx 源碼閱讀簡記

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

paulli3 2019-08-23 15:34 評論0 收藏0