JavaScript(4) 属性

本文深入探讨了ECMAScript中数据属性与访问器属性的内部特性,包括[[Configurable]]、[[Enumerable]]、[[Writable]]及[[Value]]等,并通过实例展示了如何使用Object.getOwnPropertyDescriptor和Object.defineProperty方法来读取和修改这些属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ECMA-262 defines some internal-use attributes to implement the javascript  engine.Generally,these attributes are background-work some like the garbage-clear function,so they are not accessible directly.  

Attributes of Data-property

There  are four attributes controlling the behavior of data properties.(two pairs of square brackets indicates an internal attributes)

  • [[configurable]] -- Indicates if the property may be redefined by removing the property
    via delete, changing the property’s attributes, or changing the property into an accessor
    property. By default, this is true for all properties defined directly on an object.
  • [[enumerable]] -- Indicates if the property will be returned in a for-in loop. By default,
    this is true for all properties defined directly on an object.
  • [[writable]] -- Indicates if the property’s value can be changed. By default, this is true
    for all properties defined directly on an object.
  • [[value]] -- Contains the actual data value for the property. This is the location from
    which the property’s value is read and the location to which new values are saved. The
    default value for this attribute is undefined.

Display

Method Object.getOwnPropertyDescriptor() is used to read these attributes.Pay attention to the functionDisplayAtts().
var person = {
name: "Nicholas"
};
var namex;
function DisplayAtts(obj,proverty)
{
	var descriptor=Object.getOwnPropertyDescriptor(obj,proverty);
	var _str="value:"+String(descriptor.value);
	_str+="\nconfigurable:"+descriptor.configurable.toString();
	_str+="\nenumerable:"+descriptor.enumerable.toString();
	_str+="\nwritable:"+descriptor.writable.toString();
	alert(_str);
}
DisplayAtts(person,"name");//Nicholas,true,true,true
delete namex;
DisplayAtts(window,"namex");//undefined,false,true,true
Do you notice that the configurable of variable namex is false?Generally, defined a global variable via var notation can not be removed by delete notation as well as a object(you cannot delete "person").(There is a BUG in Chrome: when you change the "namex"  to "name", the second DisplayAtts will show a true configurable and you can not delete it.)

Reset

Method Object.defineProperty() is used to changed the values of these attributes.
var person = {name:"Nicholas"};
Object.defineProperty(person, "name", {
	writable: false,
	value: "Nicholas"
});
alert(person.name); //"Nicholas"
person.name = "Greg";
alert(person.name); //"Nicholas"
Writable set to false,so the value cannot be changed.Definition is the major ability of this method,the code upside can be rewritten as following:
var person={};
Object.defineProperty(person, "name", {
	writable: false,
	value: "Nicholas"
});//defining the name property with method defineProperty and indicating attributes as well 
alert(person.name); //"Nicholas"
person.name = "Greg";
alert(person.name); //"Nicholas"

Accessor Properties

Setter and Getter function is familiar to programmers know java or C#.Yes,there is same concept in javascript.
Accessor properties don't have a value but  getter and setter functions.When read value from the accessor property,the getter function is called automatically which returns a valid value.And when a value is written to an accessor property,the setter function is called to deal with the data.
There are four attributes of accessor properties as well:
  • [[Configurable]] — Indicates if the property may be redefined by removing the property
    via delete, changing the property’s attributes, or changing the property into a data
    property. By default, this is true for all properties defined directly on an object.
  • [[Enumerable]] — Indicates if the property will be returned in a for-in loop. By default,
    this is true for all properties defi ned directly on an object.
  • [[Get]] — The function to call when the property is read from. The default value is
    undefined.
  • [[Set]] — The function to call when the property is written to. The default value is
    undefined.

Display

Object.getOwnPropertyDescriptor() is used to read these attributes as well as data properties.Few changes makes the functionDisplayAtts() displays theacceccor properties.

var programmer={name:"Addidas"};

function DisplayAtts(obj,proverty)
{
	var descriptor=Object.getOwnPropertyDescriptor(obj,proverty);
	var _str="configurable:"+descriptor.configurable.toString();
	_str+="\nenumerable:"+descriptor.enumerable.toString();
	_str+="\nget:"+String(descriptor.get);
	_str+="\nset:"+String(descriptor.set);
	alert(_str);
}
DisplayAtts(programmer,"name");//true,true,undefined,undefined

Reset

Now,reuse the function DisplayAtts mentioned above.
var add = {
	num1: 1,
	num2: 2
};
Object.defineProperty(add, "result", {
	get: function(){
		return this.num1+this.num2;
	}
});
add.num1 = 3;
add.result=20;
alert(add.result);//5

DisplayAtts(add,"result");//configurable:false enumerable:false get:function (){return this.num1+this.num2;} set:undefined 
The configurable and enumerableis false as default,it means that once you definedaccessor properties ,you cannot configure them anymore.
 

Enumerable and for-in loop

You may use foreach loop in C# which is used to get every member of a list or something else implement  enumerable interface,so you may be confused in javascript with the similar concepts: for-in loop andenumerable property.
The truth is they are absolutely different.For-in loop in javacript is used to show the properties' name of object with a boolean true enumerable property just as the followings.
var person={};
Object.defineProperty(person, "name", {
	configurable:false,
	writable: false,
	value: "Nicholas",
	enumerable:false
});
Object.defineProperty(person,"age",{
	writeable:true,
	value:16,
	enumerable:true
});
for ( x in person )
{
	console.info(x+"\n");
}//It only show the 'age'(it's the name of property: age ,not 16),because it's enumerable



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值