快捷導(dǎo)航

vue2響應(yīng)式原理之Object.defineProperty()方法的使用

更新時(shí)間：2023年10月07日 09:52:19 作者：山海入夢(mèng)

這篇文章主要介紹了vue2響應(yīng)式原理之Object.defineProperty()方法的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

前言

最近一直在研究vue2響應(yīng)式原理，去官網(wǎng)看一遍文檔，好像懂了但又好像不懂，然后去查看別人寫的響應(yīng)式原理和視頻，好的理解了百分六七十頭皮發(fā)麻，vue2的響應(yīng)式原理實(shí)現(xiàn)的核心就是Object.defineProperty()方法，所以自己也跟著手敲一下響應(yīng)式源碼記錄對(duì)Object.defineProperty的理解

一、Object.defineProperty()

1.概念

Object.defineProperty() 方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)對(duì)象的現(xiàn)有屬性，并返回此對(duì)象.

這句話到底什么意思呢？

我們簡(jiǎn)單實(shí)現(xiàn)這個(gè)方法

var obj = {}
Object.defineProperty(obj, 'name', {
  value:'科比'
})
console.log(obj.name)  //科比

可以看出Object.defineProperty()能為我們定義一個(gè)屬性，又有人會(huì)想為什么我們不直接定義obj.name='科比'，而使用這個(gè)方法不更加麻煩嗎?

2.Object.definProperty()方法

可以設(shè)置額外隱藏的屬性使用這些屬性能夠使對(duì)象更加自由的被定義

var obj = {}
Object.defineProperty(obj, 'name', {
  value:'科比',
  //是否可寫
  writable: false 
})
Object.defineProperty(obj, 'number', {
  value:24,
  //是否可枚舉
  enumerable: false 
})
//修改屬性報(bào)錯(cuò)
obj.name = "庫里"  //Cannot assign to read only property 'name' of object '#<Object>'
console.log(obj.name)

通過obj對(duì)象定義writable: false 使你屬性不能修改，如果修改obj.name就會(huì)報(bào)錯(cuò);enumerable是否可以枚舉，所以使用這些屬性能夠使對(duì)象更加自由的被定義

二、Object.definProperty()方法的get()和set()

代碼如下（示例）：

通過這個(gè)示例可知訪問obj.name屬性就會(huì)觸發(fā)get()方法，修改obj.name屬性觸發(fā)set()方法

但是我們發(fā)現(xiàn)修改obj.name屬性為"喬丹"，打印為undefined這是為什么呢?

看一下get和set方法的介紹：

get

屬性的 getter 函數(shù)，如果沒有 getter，則為 undefined。當(dāng)訪問該屬性時(shí)，會(huì)調(diào)用此函數(shù)。
執(zhí)行時(shí)不傳入任何參數(shù)，但是會(huì)傳入 this 對(duì)象（由于繼承關(guān)系，這里的this并不一定是定義該屬性的對(duì)象）。
該函數(shù)的返回值會(huì)被用作屬性的值。
默認(rèn)為 undefined。

set

屬性的 setter 函數(shù)，如果沒有 setter，則為 undefined。
當(dāng)屬性值被修改時(shí)，會(huì)調(diào)用此函數(shù)。
該方法接受一個(gè)參數(shù)（也就是被賦予的新值），會(huì)傳入賦值時(shí)的 this 對(duì)象。
默認(rèn)為 undefined。

因?yàn)間et的函數(shù)返回值會(huì)被當(dāng)作屬性的值，而我們示例中g(shù)et和set沒有return 任何值，就默認(rèn)為undefined，修改后：

const obj = {}
Object.defineProperty(obj , 'name' , {
  get(){
    console.log('訪問obj.name屬性觸發(fā)')
    return "喬丹"
  },
  set(newValue) {
    console.log('修改obj.name屬性觸發(fā)' , newValue)
  }
})
obj.name  //訪問屬性
console.log(obj.name)  //喬丹
obj.name = "科比"  //修改屬性
console.log(obj.name)  //喬丹

能夠訪問到設(shè)置的obj屬性了，但是修改了obj.name = "科比"

最后打印還是"喬丹" ，但是set方法觸發(fā)的newValue是科比這又是為什么呢?

因?yàn)間etter并不能返回你修改的值，只要你訪問obj.name他就是返回return "喬丹"

就如同你設(shè)置的set新屬性從未改變一樣非常固執(zhí)，那么我們應(yīng)該怎么解決這個(gè)問題呢?

我們可以通過一個(gè)變量com進(jìn)行周轉(zhuǎn)，修改如下：

var obj = {}
var com;  //設(shè)置變量周轉(zhuǎn)
Object.defineProperty(obj , 'name' , {
  get(){
    console.log('訪問obj.name屬性觸發(fā)')
    return com
  },
  set(newValue) {
    console.log('修改obj.name屬性觸發(fā)' , newValue)
    com = newValue
  }
})
obj.name  //訪問屬性
console.log(obj.name)  //喬丹
obj.name = "科比"  //修改屬性科比
console.log(obj.name)  //最后控制臺(tái)打印 科比

詳細(xì)了解Object.defineProperty()方法