屬性描述符

假設(shè)有一個(gè)對(duì)象obj

var obj = {a:1
}

觀察這個(gè)對(duì)象，我們?nèi)绾蝸砻枋鰧傩?code>a：

• 值為1
• 可以重寫
• 可以遍歷

• 我們可以通過Object.getOwnPropertyDescriptor得到它的屬性描述符

var desc = Object.getOwnPropertyDescriptor(obj, 'a');
console.log(desc);

我們會(huì)得到一個(gè)對(duì)象
觀察這個(gè)對(duì)象中的內(nèi)容

• configurable : true：表示描述符本身能否修改
• enumerable : true ：是否可遍歷
• value : 1 ：值
• writable : true ：是否可重寫
  

• 設(shè)置屬性描述符

Object.defineProperty(obj, 'a', {value:10,writable:false //表示不可重寫
});
console.log(obj.a); // 10

• 注：如果修改了configurable的值為false，后續(xù)再次修改屬性描述符會(huì)報(bào)錯(cuò)。

Object.defineProperty(obj, 'a', {configurable:false
});
Object.defineProperty(obj, 'a', {value:20,
});
console.log(obj.a);

• 但是，如果屬性設(shè)置了不可重寫，后續(xù)進(jìn)行修改，雖然不會(huì)報(bào)錯(cuò)，但是不會(huì)修改成功

Object.defineProperty(obj, 'a', {value:10,writable:false //表示不可重寫
});
console.log(obj.a); // 10
obj.a = 20;
console.log(obj.a); // 10

因此，如果屬性不能重寫，后續(xù)修改最好能進(jìn)行報(bào)錯(cuò)，告訴用戶哪句話出現(xiàn)了問題。

• 為了解決上面的問題，Object.defineProperty中有兩個(gè)函數(shù)
  • 讀取器 getter
  • 設(shè)置器 setter

當(dāng)讀取屬性a的值的時(shí)候會(huì)運(yùn)行g(shù)et函數(shù)，設(shè)置屬性a的值的時(shí)候會(huì) 運(yùn)行set函數(shù)

Object.defineProperty(obj, 'a', {get:function(){console.log("get函數(shù)");},set:function(val){console.log("set函數(shù)");}
});
obj.a = 20;  // set函數(shù)
console.log(obj.a);  // get函數(shù)

注：這里需要注意一個(gè)問題—無限遞歸問題

• 如果在get中讀取屬性，或者在set中設(shè)置屬性的值，則會(huì)出現(xiàn)無限遞歸問題

Object.defineProperty(obj, 'a', {get:function(){return obj.a;},set:function(val){obj.a = val;}
});
obj.a = 20;
console.log(obj.a);

• 使用樣例

var internalValue = obj.a;
Object.defineProperty(obj, 'a', {get:function(){console.log("get函數(shù)");return internalValue;},set:function(val){console.log("set函數(shù)");internalValue = val;return internalValue;}
});
obj.a = 20; // set函數(shù)
console.log(obj.a); // get函數(shù) 20

• 因此，假設(shè)該屬性不能重寫，可以在set函數(shù)中拋出一個(gè)報(bào)錯(cuò)信息，提示用戶

Object.defineProperty(obj, 'a', {get:function(){console.log('get函數(shù)');},set:function(val){throw new Error(`報(bào)錯(cuò)信息：該屬性不能賦值，你正在給這個(gè)屬性賦值為${val}`);}
})
console.log(obj.a);
obj.a = 20;

當(dāng)然，這里面也會(huì)出現(xiàn)問題需要考慮，具體出現(xiàn)的問題具體分析。