js中Object.defineProperty()方法的解釋

時間  2019-11-11
標籤 object.defineproperty object defineproperty 方法 解釋 欄目 JavaScript 简体版
原文   原文鏈接

 

菜菜： 「老大，那個， Object.defineProperty 是什麼鬼？」es6

假設咱們有個對象 user ; 咱們要給它增長一個屬性 name , 咱們會這麼作es5

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

若是想要增長一個sayHi方法叻？spa

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

Object.defineProperty 就是作這個的.net

那麼Object.defineProperty 怎麼用？code

Object.defineProperty 須要三個參數（object , propName , descriptor）htm

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

那麼descriptor這個是個對象 ，他有那些屬性呢 ? 彆着急咱們一個一個說；ip

既然能夠給一個對象增長屬性，那麼咱們用它來作一下給 user添加 name屬性，代碼是這樣的ci

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

說明 是的仍是那個經典的value屬性，他就是設置屬性值的。字符串

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

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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);

說明 事實證實任何類型的數據都是能夠的哦~

問題又來了，若是 user對象已經有了name屬性，咱們能夠經過Object.defineProperty改變這個值嗎？

咱們來試試

 
1
2
3
4
5
6
7
var user = {};
Object.defineProperty(user, "name" ,{
  value: "狂奔的蝸牛"
})
console.log(user);
user.name= "新=>狂奔的蝸牛"
console.log(user);

咦？？爲何我改了沒做用勒？？

緣由：上邊說了descriptor有不少屬性，除了value屬性還有個 writable【顧名思義屬性是否能夠被從新賦值】接受數據類型爲 boolean（默認爲false） true => 支持被從新賦值 false=>只讀

哦哦，原來若是我沒設置writable值的時候就默認只讀啊，因此才改不掉

那咱們看看，設置爲true，是否是就能夠改掉了。

 
1
2
3
4
5
6
7
8
var user = {};
Object.defineProperty(user, "name" ,{
  value: "狂奔的蝸牛" ,
  writable: true
})
console.log(user);
user.name= "新=>狂奔的蝸牛"
console.log(user);

這個descriptor還有其餘的屬性嗎？enumerable【顧名思義屬性是否能夠被枚舉】接受數據類型爲 boolean（默認爲false） true => 支持被枚舉 false=>不支持

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

假設咱們想知道這個 user對象有哪些屬性咱們通常會這麼作

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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.的方式定義屬性會發生什麼呢？咱們來看下輸出

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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屬性並無被遍歷出來，遍歷 => 其實就是枚舉（我的理解啦，不喜勿噴哦~）

總結　enumerable 屬性取值爲 布爾類型 true | false 默認值爲 false，爲真屬性能夠被枚舉；反之則不能。此設置不影響屬性的調用和 查看對象的值。

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

1 屬性是否能夠被刪除
2 屬性的特性在第一次設置以後能否被從新定義特性

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
//會報錯，以下圖

設置爲 true

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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: "男"}

總結 configurable設置爲 true 則該屬性能夠被刪除和從新定義特性；反之屬性是不能夠被刪除和從新定義特性的，默認值爲false（Ps.除了能夠給新定義的屬性設置特性，也能夠給已有的屬性設置特性哈）

最後咱們來講說，最重要的兩個屬性 set和get（即存取器描述：定義屬性如何被存取），這兩個屬性是作什麼用的呢？咱們經過代碼來看看

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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

接下來我不用解釋了吧，你想在獲取該屬性的時候對值作什麼隨你咯~

來來來，咱們看看 set，很少說上代碼

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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
 
//等等，若是我想設置的時候是 自動加1呢？我設置145 實際上設置是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

說明 注意：當使用了getter或setter方法，不容許使用writable和value這兩個屬性(若是使用，會直接報錯滴)

get 是獲取值的時候的方法，類型爲 function ，獲取值的時候會被調用，不設置時爲 undefined

set 是設置值的時候的方法，類型爲 function ，設置值的時候會被調用，undefined

get或set不是必須成對出現，任寫其一就能夠

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var user ={
  name: "狂奔的蝸牛"
} ;
var count = 12;
//定義一個age 獲取值時返回定義好的變量count
Object.defineProperty(user, "age" ,{
  get: function (){
   console.log( "這我的來獲取值了！！" );
   return count;
  },
  set: function (newVal){
   console.log( "這我的來設置值了！！" );
   count=newVal+1;
  }
})
console.log(user.age); //12
user.age=145;
console.log(user.age); //146

【完結】

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

  • value: 設置屬性的值
  • writable: 值是否能夠重寫。true | false
  • enumerable: 目標屬性是否能夠被枚舉。true | false
  • configurable: 目標屬性是否能夠被刪除或是否能夠再次修改特性 true | false
  • set: 目標屬性設置值的方法
  • get：目標屬性獲取值的方法    　　                                                                                                                                                                                       原文連接：https://www.jianshu.com/p/6519575e05
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程