JavaScript對象中的defineProperty() 方法

記錄一下，爲看懂vue源碼做一些js的準備

今天在看Vue源碼的時候 看到了下面這樣的代碼

Object.defineProperty(Vue.prototype, '$isServer', {
  get: isServerRendering
})

然後就發現自己居然不知道  Object.defineProperty是什麼，在通過百度和看javaScript 權威指南書後瞭解了它

一， 我們先解釋一下這個 方法解釋

   如果想要設置屬性特徵，或者想讓新創建的屬性具備某種屬性 就需要使用這個方法。

   換成我們的大白話就是，給一個新對象添加一些屬性

let user={}
user.name='小明'

這就是我們平時寫代碼最常用的賦值方法，但最標準的是我們因該使用defineProperty這個方法。

二， 解釋這個方法發參數

Object.defineProperty(Object,proName,define)

需要傳入三個參數 

1，object 你要操作的對象  在這裏就是我們的  user

2, proName 要添加的屬性的名字，在這裏就是我們的name

3, define 定義你添加屬性的一些可操作標誌  （是否可刪除，是否可枚舉，是否可賦值等）

簡單的代碼

Object.defineProperty(user,'name',{
	value:'小明'
})

這樣  我們就實現了簡單的賦值（當在寫代碼中  如果僅僅只是爲了添加一個屬性並賦值 還不如直接用上面的）

所以 這個方法的核心就是 define 這個定義的其他屬性

1 writable 是否可賦值 默認時false

Object.defineProperty(user,'name',{
	value:'小明',
	writable:false
})
console.log(user.name)
user.name='小法'
console.log(user.name)

當我們設置 writable屬性爲false時，我們下面的目的就不能實現，

上面的代碼時 想重新給這個name賦值 但顯示結果確實如下

2 enumerable 是否可枚舉 默認是false 不可枚舉

        枚舉就是當我們想看到一個對象的有多少個屬性時就會使用枚舉

let user={}

Object.defineProperty(user,'name',{
	value:'小明',
	writable:false
})
Object.defineProperty(user,'age',{
	value:'15',
	writable:true,
	enumerable:true
})
let key= Object.keys(user)
console.log(key)

上面代碼的目的是 查看枚舉內容，以爲默認是false 所以會出現這樣的結果

只有age屬性被拿了出來

3 configurable 是否可刪除和是否被重新定義 默認是false

     是否可刪除好理解就是 true就能刪除 反之不能，是否能被重新定義就是在使用 definePropety這個方法在重新定義一次

Object.defineProperty(user,'name',{
	value:'小明',
	writable:false,
	enumerable:true,
	configurable:false
})
console.log(user)
delete user.name
console.log(user)

上面代碼目的是 當爲false時 刪除屬性 結果如下 不可刪除

如果第一次定義爲false 第二次又定義爲true結果會是什麼呢？ 當然結果時報錯

let user={}

Object.defineProperty(user,'name',{
	value:'小明',
	writable:false,
	enumerable:true,
	configurable:false
})
Object.defineProperty(user,'name',{
	value:'小明',
	configurable:true
})
console.log(user)
delete user.name
console.log(user)

4  get和set 屬性 就是拿取和設置屬性

   注意：當使用get和set時 就不能在設置value和writable屬性

let user={}
var str='小妹'

Object.defineProperty(user,'name',{
	get:function(){
		return str
	},
	set:function(newVal){
		str=newVal
	}
})
console.log(user.name)
user.name='小米'
console.log(user.name)

get和set並不是要同時存在的  只要存在一個就可以了

 

總結一下  就是 Object.defineProperty() 這個方法目的就是給對象添加一些新的屬性，並定義一下這個屬性的 能力範圍

定義中的屬性 writable 是否能賦值，enumerable 是否可枚舉，configurable 是否可刪除和定義 ，還有get和set

這些屬性就是這個方法的核心

同時 get和set 的將會  出現在vue的雙向數據綁定中

每天進步一點點  一年就是一大點  加油