defineProperty詳解

charles_paul 發布于2019-08-23 14:30 / 2533人閱讀

摘要：擱置了幾天我還是決定再次重寫下邊我們來具體聊聊先從開始說起有個定義屬性的功能，應該沒幾個人用，因為相對于這種方式簡直不能再難用。

擱置了幾天我還是決定再次重寫！

下邊我們來具體聊聊先從defineProperty開始說起

defineproperty

//defineproperty 有個定義object屬性的功能，應該沒幾個人用，因為相對于obj.a = 1這種方式簡直不能再難用。

//通常我們定義obj屬性
let obj = {
      a:1
}
obj.b = 2
obj["c"] = 3
console.log(obj)//{a: 1, b: 2,c: 3}  

Object.defineProperty(obj,"d",{
      value: 4
})

console.log(obj)//{a: 1, b: 2,c: 3,d:4}  //defineProperty可以定義對象屬性

//也可以修改
Object.defineProperty(obj,"b",{
      value: 5
})
console.log(obj)//{a: 1, b: 5, c: 3, d: 4}

//對你沒看錯defineProperty有這個功能，不知可以定義新的屬性還可以修改，這么逆天難用的功能為什么還要造出來？說這個有什么用？別急往下看

descriptor詳解

defineProperty 接收三個參數

object （必須有操作的對象本身這個很容易理解不傳它操作誰？）

propertyname (必須有屬性名添加修改屬性得有屬性名)

descriptor （必須有官方說的我理解不了，我理解的是屬性描述
1、簡單點就是設置屬性的值value，
2、是否可操作屬性值 writable，
3、是否可修改配置configurable如果值為false descriptor內的屬性都不可操作）
4、是否可枚舉enumerable

*descriptor內配置可有可無，value默認undefind，其余默認為false

先做了介紹我們下邊來證明下

writable

//栗子還是這個栗子
        let obj = {
            a: 1
        }
        Object.defineProperty(obj, "b", {
            value: 2,
            writable: false//不可修改
        })

        obj.b = 3
        console.log(obj) //{a: 1, b: 2} 還真是不可以
        //難道是姿勢不對？
        Object.defineProperty(obj, "b", {
            value: 3
        })
        console.log(obj)//{a: 1, b: 2} 一樣的效果 和姿勢無關。

configurable

//configurable 這個比較厲害控制descriptor內屬性都不可改變不知道是不是真的

//還是這個栗子

       let obj = {
            a: 1
        }
        Object.defineProperty(obj, "b", {
            value: 2,
            //writable: false//不可修改
            configurable: false
        })
        obj.b = 5
        console.log(obj)//[1,2]

enumerable

對否可枚舉

 let obj = {
            a: 1
        }
        Object.defineProperty(obj, "b", {
            value: 2,
            //writable: false//不可修改
            //configurable: false
            enumerable: false
        })
        //obj.b = 5
        console.log(Object.keys(obj))//["a"]

接了下來說到重點： set和get這也是vue3.0前observe的實現原理

let obj = {
            a: 1
        }

        let newValue = 45
        Object.defineProperty(obj, "b", {
            get(value) {
                console.log("獲取")
                return value
            },
            set(newValue) {
                console.log("設置")
                value = newValue
            }
        })
        obj.b = 6 //設置

        obj.b //獲取

知道用法了我們來實踐一下

      //html
      
      
      //js
      //類似 vue的data
        let obj = {}

        /*
         *obj      要劫持的對象
         *name     要劫持對象的屬性
         *callback 劫持以后的操作
         */
        function watch(obj, name, callback) {
            let value = obj.name
            Object.defineProperty(obj, name, {
                set(msg) {
                    // 觸發setter給obj賦值
                    value = msg
                        //執行劫持后的操作
                    callback(value)
                },
                get() {
                    //返回獲取屬性值
                    return value
                }
            })
        }

        //
        function doSomething(value) {
            document.querySelector("div").innerHTML = value
            document.querySelector("input").value = value
        }
        //監聽input變化 
        //可以參考全兼容版：https://segmentfault.com/a/1190000017524278
        document.querySelector("input").addEventListener("input", (e) => {
            obj["msg"] = e.target.value
        })

        watch(obj, "msg", doSomething)

效果：
1、input輸入改變div內容

2、改變obj name屬性

3、獲取改變后的obj屬性name

簡單的用defineProperty實現了雙向綁定

歡迎吐槽！您的點贊是我繼續的動力！謝謝

GPU云服務器云服務器 defineProperties defineProperty 判斷詳解日志詳解

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

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

詳解Object.defineProperty()

摘要：前言是新增的一個，其作用是給對象的屬性增加更多的控制。使用方法提供了一種直接的方式來定義對象屬性或者修改已有對象屬性。數據描述符是一個擁有可寫或不可寫值的屬性。存取描述符是由一對函數功能來描述的屬性。這也是實現雙向數據綁定的關鍵。前言 Object.defineProperty是ES5新增的一個API，其作用是給對象的屬性增加更多的控制。在我們日常的coding中，這個API用到的地...

HtmlCssJs 2019-08-19 18:05 評論0 收藏0
詳解JavaScript之神奇的Object.defineProperty

摘要：與當與同時為時，屬性不能重新使用定義，嚴格模式下會報錯示例云麒報錯當或者為時，屬性可以重新使用定義，這一點讀者不妨自行測試。摘要： JavaScript有個很神奇的Object.defineProperty()，了解一下？ =與Object.defineProperty 為JavaScript對象新增或者修改屬性，有兩種不同方式：直接使用=賦值或者使用Object.definePro...

baishancloud 2019-08-26 17:40 評論0 收藏0
JavaScript對象詳解

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

fancyLuo 2019-08-26 12:14 評論0 收藏0
Javascript Object方法詳解

摘要：創建對象創建一個普通對象創建一個沒有原型的新對象不繼承任何屬性和方法返回對象中可枚舉的自我屬性的名稱的數組返回對象中所有自我屬性的名稱的數組屬性的特性屬性有兩種特性數據屬性和存取器屬性數據屬性存取器屬性可以獲得某個對象特定自有屬性的屬性描述 Object.create(o) 創建對象 Object.create({x: 1}) //創建一個普通對象 Object.create(null...

sushi 2019-08-21 10:52 評論0 收藏0
【前端基礎進階】JS-Object 功能詳解

摘要：可以用來處理數組，但是會把數組視為對象。返回指定對象的原型內部屬性的值，即，而非對象的。判斷一個對象是否存在于另一個對象的原型鏈上。該方法返回被凍結的對象。密封一個對象會讓這個對象變的不能添加新屬性，且所有已有屬性會變的不可配置。 showImg(https://segmentfault.com/img/bVboKpP?w=796&h=398); Object.assign(targe...

tangr206 2019-08-23 15:25 評論0 收藏0