溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

js中Object.defineProperty()方法的不詳解

發(fā)布時間：2020-10-07 21:13:10 來源：腳本之家 閱讀：127 作者：小楓學(xué)幽默 欄目：web開發(fā)

菜菜： “老大，那個， Object.defineProperty 是什么鬼？”

假設(shè)我們有個對象 user ; 我們要給它增加一個屬性 name , 我們會這么做

var user = {};
user.name="狂奔的蝸牛";
console.log(user);//{name: "狂奔的蝸牛"}

如果想要增加一個sayHi方法叻？

user.sayHi=function () { console.log("Hi !") };
console.log(user);//{name: "狂奔的蝸牛", sayHi: ƒn}

Object.defineProperty 就是做這個的

那么Object.defineProperty 怎么用？

Object.defineProperty 需要三個參數(shù)（object , propName , descriptor）

1 object 對象 => 給誰加
2 propName 屬性名 => 要加的屬性的名字 【類型：String】
3 descriptor 屬性描述 => 加的這個屬性有什么樣的特性【類型：Object】

那么descriptor這個是個對象 ，他有那些屬性呢 ? 別著急我們一個一個說；

既然可以給一個對象增加屬性，那么我們用它來做一下給 user添加 name屬性，代碼是這樣的

 var user = {};
 Object.defineProperty(user,"name",{
  value:"狂奔的蝸牛"
 })
 console.log(user);//{name: "狂奔的蝸牛"}

說明 是的還是那個經(jīng)典的value屬性，他就是設(shè)置屬性值的。

等等，屬性值只能為字符串嗎？我們的 number function Object boolean 等呢？

 var user = {};
 Object.defineProperty(user,"name",{
  value:"狂奔的蝸牛"
 })
 Object.defineProperty(user,"isSlow",{
  value:true
 })
 Object.defineProperty(user,"sayHi",{
  value:function () { console.log("Hi !") }
 })
 Object.defineProperty(user,"age",{
  value:12
 })
 Object.defineProperty(user,"birth",{
  value:{
   date:"2018-06-29",
   hour:"15:30"
  }
 })
 console.log(user);

js中Object.defineProperty()方法的不詳解

說明 事實證明任何類型的數(shù)據(jù)都是可以的哦~

問題又來了，如果 user對象已經(jīng)有了name屬性，我們可以通過Object.defineProperty改變這個值嗎？

我們來試試

 var user = {};
 Object.defineProperty(user,"name",{
  value:"狂奔的蝸牛"
 })
 console.log(user);
 user.name="新=>狂奔的蝸牛"
 console.log(user);

咦？？為什么我改了沒作用勒？？

原因：上邊說了descriptor有很多屬性，除了value屬性還有個 writable【顧名思義屬性是否可以被重新賦值】接受數(shù)據(jù)類型為 boolean（默認(rèn)為false） true => 支持被重新賦值 false=>只讀

哦哦，原來如果我沒設(shè)置writable值的時候就默認(rèn)只讀啊，所以才改不掉

那我們看看，設(shè)置為true，是不是就可以改掉了。

 var user = {};
 Object.defineProperty(user,"name",{
  value:"狂奔的蝸牛",
  writable:true
 })
 console.log(user);
 user.name="新=>狂奔的蝸牛"
 console.log(user);

js中Object.defineProperty()方法的不詳解

這個descriptor還有其他的屬性嗎？enumerable【顧名思義屬性是否可以被枚舉】接受數(shù)據(jù)類型為 boolean（默認(rèn)為false） true => 支持被枚舉 false=>不支持

額。。。枚舉？？什....什么意思？

假設(shè)我們想知道這個 user對象有哪些屬性我們一般會這么做

var user ={
 name:"狂奔的蝸牛",
 age:25
} ;

//es6
var keys=Object.keys(user)
console.log(keys);// ['name','age']
//es5
var keys=[];
for(key in user){
 keys.push(key);
} 
console.log(keys);// ['name','age']

如果我們使用 Object.的方式定義屬性會發(fā)生什么呢？我們來看下輸出

var user ={
 name:"狂奔的蝸牛",
 age:25
} ;
//定義一個性別 可以被枚舉
Object.defineProperty(user,"gender",{
 value:"男",
 enumerable:true
})

//定義一個出生日期 不可以被枚舉
Object.defineProperty(user,"birth",{
 value:"1956-05-03",
 enumerable:false
})

//es6
var keys=Object.keys(user)
console.log(keys);
// ["name", "age", "gender"]

console.log(user);
// {name: "狂奔的蝸牛", age: 25, gender: "男", birth: "1956-05-03"}
console.log(user.birth);
// 1956-05-03

說明　很明顯，我們定義為　enumerable=false的birth屬性并沒有被遍歷出來，遍歷 => 其實就是枚舉（個人理解啦，不喜勿噴哦~）

總結(jié)　enumerable 屬性取值為 布爾類型 true | false 默認(rèn)值為 false，為真屬性可以被枚舉；反之則不能。此設(shè)置不影響屬性的調(diào)用和 查看對象的值。

configurable 是接下來我們要講的一個屬性，這個屬性有兩個作用：

1 屬性是否可以被刪除
2 屬性的特性在第一次設(shè)置之后可否被重新定義特性

var user ={
 name:"狂奔的蝸牛",
 age:25
} ;
//定義一個性別 不可以被刪除和重新定義特性
Object.defineProperty(user,"gender",{
 value:"男",
 enumerable:true,
 configurable:false
})

//刪除一下
delete user.gender;
console.log(user);//{name: "狂奔的蝸牛", age: 25, gender: "男"}

//重新定義特性
Object.defineProperty(user,"gender",{
 value:"男",
 enumerable:true,
 configurable:true
})
// Uncaught TypeError: Cannot redefine property: gender
//會報錯，如下圖

js中Object.defineProperty()方法的不詳解

設(shè)置為 true

var user ={
 name:"狂奔的蝸牛",
 age:25
} ;
//定義一個性別 可以被刪除和重新定義特性
Object.defineProperty(user,"gender",{
 value:"男",
 enumerable:true,
 configurable:true
})

//刪除前
console.log(user);
// {name: "狂奔的蝸牛", age: 25, gender: "男"}

//刪除一下
delete user.gender;
console.log(user);
// {name: "狂奔的蝸牛", age: 25}

//重新定義特性
Object.defineProperty(user,"gender",{
 value:"男",
 enumerable:true,
 configurable:false
})

//刪除前
console.log(user);
// {name: "狂奔的蝸牛", age: 25, gender: "男"}
//刪除一下 刪除失敗
delete user.gender;
console.log(user);
// {name: "狂奔的蝸牛", age: 25, gender: "男"}

總結(jié) configurable設(shè)置為 true 則該屬性可以被刪除和重新定義特性；反之屬性是不可以被刪除和重新定義特性的，默認(rèn)值為false（Ps.除了可以給新定義的屬性設(shè)置特性，也可以給已有的屬性設(shè)置特性哈）

最后我們來說說，最重要的兩個屬性 set和get（即存取器描述：定義屬性如何被存?。@兩個屬性是做什么用的呢？我們通過代碼來看看

var user ={
 name:"狂奔的蝸牛"
} ;
var count = 12;
//定義一個age 獲取值時返回定義好的變量count
Object.defineProperty(user,"age",{
 get:function(){
  return count;
 }
})
console.log(user.age);//12

//如果我每次獲取的時候返回count+1呢
var user ={
 name:"狂奔的蝸牛"
} ;
var count = 12;
//定義一個age 獲取值時返回定義好的變量count
Object.defineProperty(user,"age",{
 get:function(){
  return count+1;
 }
})
console.log(user.age);//13

接下來我不用解釋了吧，你想在獲取該屬性的時候?qū)χ底鍪裁措S你咯~

來來來，我們看看 set，不多說上代碼

var user ={
 name:"狂奔的蝸牛"
} ;
var count = 12;
//定義一個age 獲取值時返回定義好的變量count
Object.defineProperty(user,"age",{
 get:function(){
  return count;
 },
 set:function(newVal){
  count=newVal;
 }
})
console.log(user.age);//12
user.age=145;
console.log(user.age);//145
console.log(count);//145

//等等，如果我想設(shè)置的時候是 自動加1呢？我設(shè)置145 實際上設(shè)置是146

var user ={
 name:"狂奔的蝸牛"
} ;
var count = 12;
//定義一個age 獲取值時返回定義好的變量count
Object.defineProperty(user,"age",{
 get:function(){
  return count;
 },
 set:function(newVal){
  count=newVal+1;
 }
})
console.log(user.age);//12
user.age=145;
console.log(user.age);//146
console.log(count);//146

說明 注意：當(dāng)使用了getter或setter方法，不允許使用writable和value這兩個屬性(如果使用，會直接報錯滴)

get 是獲取值的時候的方法，類型為 function ，獲取值的時候會被調(diào)用，不設(shè)置時為 undefined

set 是設(shè)置值的時候的方法，類型為 function ，設(shè)置值的時候會被調(diào)用，undefined

get或set不是必須成對出現(xiàn)，任寫其一就可以

var user ={
 name:"狂奔的蝸牛"
} ;
var count = 12;
//定義一個age 獲取值時返回定義好的變量count
Object.defineProperty(user,"age",{
 get:function(){
  console.log("這個人來獲取值了?。?);
  return count;
 },
 set:function(newVal){
  console.log("這個人來設(shè)置值了?。?);
  count=newVal+1;
 }
})
console.log(user.age);//12
user.age=145;
console.log(user.age);//146

js中Object.defineProperty()方法的不詳解

【完結(jié)】

Object.defineProperty方法直接在一個對象上定義一個新屬性，或者修改一個已經(jīng)存在的屬性， 并返回這個對象

  • value: 設(shè)置屬性的值
  • writable: 值是否可以重寫。true | false
  • enumerable: 目標(biāo)屬性是否可以被枚舉。true | false
  • configurable: 目標(biāo)屬性是否可以被刪除或是否可以再次修改特性 true | false
  • set: 目標(biāo)屬性設(shè)置值的方法
  • get：目標(biāo)屬性獲取值的方法

下一篇，我們來看看怎么用它做一個簡單的雙向綁定

文章傳送門 => 用Object.defineProperty手寫一個簡單的雙向綁定

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手