摘要:擱置了幾天我還是決定再次重寫下邊我們來具體聊聊先從開始說起有個(gè)定義屬性的功能,應(yīng)該沒幾個(gè)人用,因?yàn)橄鄬?duì)于這種方式簡(jiǎn)直不能再難用。
擱置了幾天我還是決定再次重寫!
下邊我們來具體聊聊先從defineProperty開始說起
defineproperty//defineproperty 有個(gè)定義object屬性的功能,應(yīng)該沒幾個(gè)人用,因?yàn)橄鄬?duì)于obj.a = 1這種方式簡(jiǎn)直不能再難用。 //通常我們定義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可以定義對(duì)象屬性 //也可以修改 Object.defineProperty(obj,"b",{ value: 5 }) console.log(obj)//{a: 1, b: 5, c: 3, d: 4}
//對(duì)你沒看錯(cuò)defineProperty有這個(gè)功能,不知可以定義新的屬性還可以修改,這么逆天難用的功能為什么還要造出來?說這個(gè)有什么用?別急往下看
descriptor詳解object (必須有 操作的對(duì)象本身 這個(gè)很容易理解不傳它操作誰?)
propertyname (必須有 屬性名 添加修改屬性得有屬性名)
descriptor (必須有 官方說的我理解不了,我理解的是 屬性描述
1、簡(jiǎn)單點(diǎn)就是 設(shè)置屬性的值value,
2、是否可操作屬性值 writable,
3、是否可修改配置configurable如果值為false descriptor內(nèi)的屬性都不可操作)
4、是否可枚舉enumerable
先做了介紹我們下邊來證明下
//栗子還是這個(gè)栗子 let obj = { a: 1 } Object.defineProperty(obj, "b", { value: 2, writable: false//不可修改 }) obj.b = 3 console.log(obj) //{a: 1, b: 2} 還真是不可以 //難道是姿勢(shì)不對(duì)? Object.defineProperty(obj, "b", { value: 3 }) console.log(obj)//{a: 1, b: 2} 一樣的效果 和姿勢(shì)無關(guān)。
//configurable 這個(gè)比較厲害 控制descriptor內(nèi)屬性都不可改變不知道是不是真的
//還是這個(gè)栗子
let obj = { a: 1 } Object.defineProperty(obj, "b", { value: 2, //writable: false//不可修改 configurable: false }) obj.b = 5 console.log(obj)//[1,2]
對(duì)否可枚舉
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"]
接了下來說到重點(diǎn): set和get這也是vue3.0前observe的實(shí)現(xiàn)原理
let obj = { a: 1 } let newValue = 45 Object.defineProperty(obj, "b", { get(value) { console.log("獲取") return value }, set(newValue) { console.log("設(shè)置") value = newValue } }) obj.b = 6 //設(shè)置 obj.b //獲取
知道用法了我們來實(shí)踐一下
//html //js //類似 vue的data let obj = {} /* *obj 要劫持的對(duì)象 *name 要劫持對(duì)象的屬性 *callback 劫持以后的操作 */ function watch(obj, name, callback) { let value = obj.name Object.defineProperty(obj, name, { set(msg) { // 觸發(fā)setter給obj賦值 value = msg //執(zhí)行劫持后的操作 callback(value) }, get() { //返回獲取屬性值 return value } }) } // function doSomething(value) { document.querySelector("div").innerHTML = value document.querySelector("input").value = value } //監(jiān)聽input變化 //可以參考全兼容版:https://segmentfault.com/a/1190000017524278 document.querySelector("input").addEventListener("input", (e) => { obj["msg"] = e.target.value }) watch(obj, "msg", doSomething)
效果:
1、input輸入改變div內(nèi)容
2、改變obj name屬性
3、獲取改變后的obj屬性name
簡(jiǎn)單的用defineProperty實(shí)現(xiàn)了雙向綁定
歡迎吐槽!您的點(diǎn)贊是我繼續(xù)的動(dòng)力!謝謝
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/100710.html
摘要:前言是新增的一個(gè),其作用是給對(duì)象的屬性增加更多的控制。使用方法提供了一種直接的方式來定義對(duì)象屬性或者修改已有對(duì)象屬性。數(shù)據(jù)描述符是一個(gè)擁有可寫或不可寫值的屬性。存取描述符是由一對(duì)函數(shù)功能來描述的屬性。這也是實(shí)現(xiàn)雙向數(shù)據(jù)綁定的關(guān)鍵。 前言 Object.defineProperty是ES5新增的一個(gè)API,其作用是給對(duì)象的屬性增加更多的控制。在我們?nèi)粘5腸oding中,這個(gè)API用到的地...
摘要:與當(dāng)與同時(shí)為時(shí),屬性不能重新使用定義,嚴(yán)格模式下會(huì)報(bào)錯(cuò)示例云麒報(bào)錯(cuò)當(dāng)或者為時(shí),屬性可以重新使用定義,這一點(diǎn)讀者不妨自行測(cè)試。 摘要: JavaScript有個(gè)很神奇的Object.defineProperty(),了解一下? =與Object.defineProperty 為JavaScript對(duì)象新增或者修改屬性,有兩種不同方式:直接使用=賦值或者使用Object.definePro...
摘要:屬性描述符升級(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ù)類型 ...
摘要:創(chuàng)建對(duì)象創(chuàng)建一個(gè)普通對(duì)象創(chuàng)建一個(gè)沒有原型的新對(duì)象不繼承任何屬性和方法返回對(duì)象中可枚舉的自我屬性的名稱的數(shù)組返回對(duì)象中所有自我屬性的名稱的數(shù)組屬性的特性屬性有兩種特性數(shù)據(jù)屬性和存取器屬性數(shù)據(jù)屬性存取器屬性可以獲得某個(gè)對(duì)象特定自有屬性的屬性描述 Object.create(o) 創(chuàng)建對(duì)象 Object.create({x: 1}) //創(chuàng)建一個(gè)普通對(duì)象 Object.create(null...
摘要:可以用來處理數(shù)組,但是會(huì)把數(shù)組視為對(duì)象。返回指定對(duì)象的原型內(nèi)部屬性的值,即,而非對(duì)象的。判斷一個(gè)對(duì)象是否存在于另一個(gè)對(duì)象的原型鏈上。該方法返回被凍結(jié)的對(duì)象。密封一個(gè)對(duì)象會(huì)讓這個(gè)對(duì)象變的不能添加新屬性,且所有已有屬性會(huì)變的不可配置。 showImg(https://segmentfault.com/img/bVboKpP?w=796&h=398); Object.assign(targe...
閱讀 2686·2021-09-22 15:58
閱讀 2230·2019-08-29 16:06
閱讀 896·2019-08-29 14:14
閱讀 2810·2019-08-29 13:48
閱讀 2451·2019-08-28 18:01
閱讀 1495·2019-08-28 17:52
閱讀 3317·2019-08-26 14:05
閱讀 1610·2019-08-26 13:50