我想知道何时应该使用
Object.defineProperty
为对象创建新属性。我知道我能够设置像
这样的东西enumerable: false
但你什么时候需要这个呢?如果你只是设置像
这样的属性myObject.myprop = 5;
它的描述符都设置为true,对吗?当你们使用.defineProperty()的相当冗长的调用以及出于什么原因时,我实际上更好奇。
答案 0 :(得分:37)
Object.defineProperty
主要用于设置具有特定属性描述符的属性(例如只读(常量)),可枚举性(不显示for (.. in ..)
循环中的属性,getter,setter)。
"use strict";
var myObj = {}; // Create object
// Set property (+descriptor)
Object.defineProperty(myObj, 'myprop', {
value: 5,
writable: false
});
console.log(myObj.myprop);// 5
myObj.myprop = 1; // In strict mode: TypeError: myObj.myprop is read-only
此方法使用属性扩展Object
原型。仅定义了getter,并且可枚举性设置为false
。
Object.defineProperty(Object.prototype, '__CLASS__', {
get: function() {
return Object.prototype.toString.call(this);
},
enumerable: false // = Default
});
Object.keys({}); // []
console.log([].__CLASS__); // "[object Array]"
答案 1 :(得分:21)
我的经验中很少使用像“可枚举”这样的功能。 主要用例是计算属性:
var myObj = {};
myObj.width = 20;
myObj.height = 20;
Object.defineProperty(myObj, 'area', {
get: function() {
return this.width*this.height;
}
});
console.log(myObj.area);
答案 2 :(得分:12)
使用Object.defineProperty的一个非常好的理由是,它允许您将对象中的函数作为计算属性循环,该函数执行函数而不是返回函数的主体。
例如:
var myObj = {};
myObj.width = 20;
myObj.height = 20;
Object.defineProperty(myObj, 'area', {
get: function() {
return this.width*this.height;
},
enumerable: true
});
for (var key in myObj) {
if (myObj.hasOwnProperty(key)) {
console.log(key + " -> " + myObj[key]);
}
}
//width -> 20, height -> 20, area -> 400
将该函数作为属性添加到对象文字中:
var myObj = {};
myObj.width = 20;
myObj.height = 20;
myObj.area = function() {
return this.width*this.height;
};
for (var key in myObj) {
if (myObj.hasOwnProperty(key)) {
console.log(key + " -> " + myObj[key]);
}
}
// width -> 20, height -> 20, area -> function() { return this.width*this.height;}
确保将enumerable属性设置为true以循环遍历它。
答案 3 :(得分:2)
例如that's what Vue.js keeps track of changes in the data
object:
当您将普通的JavaScript对象作为其
std::vector<float> b[2]; float i = 1; std::vector<float> first_vector = b[0]; first_vector.push_back(i);
选项传递给Vue实例时,Vue将遍历其所有属性,并使用data
将它们转换为getter/setters
< / strong>。这是仅限ES5且不可调整的功能,这就是Vue不支持IE8及更低版本的原因。getter / setter对用户是不可见的,但是在后台,它们使Vue在访问或修改属性时能够执行依赖项跟踪和更改通知。
[...]
请记住,即使是超薄且基本的Vue.js版本也将使用Object.defineProperty
之外的其他功能,但主要功能来自于此:
在这里您可以看到一篇文章,其中作者实现了Vue.js之类的最低版本PoC版本:https://medium.com/js-dojo/understand-vue-reactivity-implementation-step-by-step-599c3d51cd6c
这是一个演讲(西班牙语),演讲者在解释Vue.js的反应性时构建了类似的内容:https://www.youtube.com/watch?v=axXwWU-L7RM
答案 4 :(得分:1)
Object.defineProperty
防止您不小心将值分配给原型链中的某些键。使用这种方法,您只能分配给该特定对象级别(而不分配给原型链中的任何键)。
例如:
有一个像{key1: value1, key2: value2}
的对象,您可能不完全知道它的原型链,或者错误地错过了它,然后原型链中某处有一些“颜色”属性-
使用点(。)分配-
此操作会将值分配给原型链中的键“颜色” (如果键存在于某处),您将发现没有变化的对象为。 obj.color ='蓝色'; // obj保持与{key1:value1,key2:value2}
相同使用Object.defineProperty方法-
Object.defineProperty(obj, 'color', {
value: 'blue'
});
//现在obj看起来像{key1: value1, key2: value2, color: 'blue'}
。它将属性添加到同一级别。然后您可以使用方法Object.hasOwnProperty()
安全地进行迭代。
答案 5 :(得分:0)
我在defineProperty
看到的一个简洁的用例是库为用户提供错误属性,如果在某个时间间隔内没有访问它,你会抛出自己。例如:
let logErrorTimeoutId = setTimeout(() => {
if (error) {
console.error('Unhandled (in <your library>)', error.stack || error);
}
}, 10);
Object.defineProperty(data, 'error', {
configurable: true,
enumerable: true,
get: () => {
clearTimeout(logErrorTimeoutId);
return error;
},
});
答案 6 :(得分:0)
一个很好的用途是当你需要进行一些拦截或以优雅的方式应用经典的Observer / Observable模式时:
答案 7 :(得分:0)
在Javascript中,对象是键值对的集合。
Object.defineProperty()
是一个可以在对象上定义新属性并可以设置属性的以下属性的函数:
<any>
:与键关联的值<boolean>
:如果可写设置为true
,则可以通过为其分配新值来更新该属性。如果设置为false
,则不能更改该值。<boolean>
::如果可枚举设置为true
,则可以通过for..in
循环访问属性。此外,只有Object.keys()
<boolean>
::如果可配置的设置为false
,则不能更改属性属性(值/可写/可枚举/可配置),也不能更改值,则无法使用delete
运算符将其删除。
let obj = {};
Object.defineProperty(obj, 'prop1', {
value: 1,
writable: false,
enumerable: false,
configurable: false
}); // create a new property (key=prop1, value=1)
Object.defineProperty(obj, 'prop2', {
value: 2,
writable: true,
enumerable: true,
configurable: true
}); // create a new property (key=prop2, value=2)
console.log(obj.prop1, obj.prop2); // both props exists
for(const props in obj) {
console.log(props);
// only logs prop2 because writable is true in prop2 and false in prop1
}
obj.prop1 = 100;
obj.prop2 = 100;
console.log(obj.prop1, obj.prop2);
// only prop2 is changed because prop2 is writable, prop1 is not
delete obj.prop1;
delete obj.prop2;
console.log(obj.prop1, obj.prop2);
// only prop2 is deleted because prop2 is configurable and prop1 is not
答案 8 :(得分:0)
一个非常有用的案例是监视某项更改并对其采取行动。这很容易,因为只要设置了值,就可以触发回调函数。这是一个基本示例。
您有一个对象Player
,该对象可以播放或不播放。您希望在开始播放时和停止播放时发生一些事情。
function Player(){}
Object.defineProperty(Player.prototype, 'is_playing', {
get(){
return this.stored_is_playing; // note: this.is_playing would result in an endless loop
},
set(newVal){
this.stored_is_playing = newVal;
if (newVal === true) {
showPauseButton();
} else {
showPlayButton();
}
}
});
const cdplayer = new Player();
cdplayer.is_playing = true; // showPauseButton fires
此答案与此处的其他几个答案相关,它们是获取更多信息的不错的起点,但无需通过外部链接来阅读有关库或编程范例的信息。
答案 9 :(得分:-1)
@Gerard Simpson
如果'area'应该是可枚举的,那么它也可以在没有Object.defineProperty的情况下编写。
var myObj = {
get area() { return this.width * this.height }
};
myObj.width = 20;
myObj.height = 20;
for (var key in myObj) {
if (myObj.hasOwnProperty(key)) {
console.log(key + " -> " + myObj[key]);
}
}
//area -> 400, width -> 20, height -> 20