JavaScript -- data attributes and accessors attributes

JavaScript -- data attributes and accessors attributes

The most basic method for creating an Object in JavaScript is to create an instance of a new Object (), and then add attributes and methods to it. In the following example, create a person Object containing the attribute name, the feature value of the name attribute is "xiaochang ":

　　var person = new Object();person.name = "xiaochang";person.say = function(){ console.log("Hi, my name is " + this.name);};person.say(); //Hi, my name is xiaochang

EAMAScript. 5 defines various features that describe these attribute features, including data attributes and accessors attributes.

Data Attribute: This attribute contains the location of a data value. It contains four characteristics that describe behavior:

1. [[retriable]: indicates whether the attribute can be deleted through delete to redefine the attribute, whether the attribute can be modified, and whether the attribute can be changed to the accessors attribute.

2. [[Enumerable]: Indicates whether to use the for-in loop to return data.

3. [[writable]: indicates whether the attribute value can be modified.

4. [[Value]: contains the data Value of this attribute. Read from this position when reading the property value, and update to this position when writing the property value. The default value is undefined.

The data features of attributes defined directly on objects are as follows by default:

1. [[retriable]: true

2. [[Enumerable]: true

3. [[writable]: true

4. [[Value]: "xiaochang" (Initial Value assignment)

These features cannot be directly accessed. The attributes to be modified can only be accessed through objects. defineProperty () method. This method contains three parameters: the object where the attribute is located, the name of the attribute, and the descriptor object [retriable | enumerable | writable | value]. For example:

　　Var person = {age: 100}; Object. defineProperty (person, "name", {retriable: false, writable: false, value: "xiaochang"}); Object. defineProperty (person, "tall", {value: 160}); for (attr in person) {console. log (attr); // name, age} console. log (person. name); // xiaochangperson. name = "CC"; // specify a new value for the name Attribute console. log (person. name); // xiaochangdelete person. name; // delete the name Attribute console. log (person. name); // xiaochangconsole. log (person. age); // 100person. age = 200; // specify a new value for the age Attribute console. log (person. age); // 200 delete person. age; // Delete the age property console. log (person. age); // undefinedconsole. log (person. tall); // 160person. tall = 160; // modify the value of the tall Attribute console. log (person. tall); // 160 delete person. tall; // delete the name Attribute console. log (person. tall); // 160

The analysis example shows that all attributes defined on an object, such as age, [[retriable], [[Enumerable], and [[writable], are set to true.

[[Writable able] and [[writable] of the attribute name are set to false, so they cannot be modified or deleted.

When the Object. defineProperty () method is called, if the values of the specified retriable, enumerable, and writable are not displayed, the default value is false, for example, the property tall.

In addition, when the retriable value is set to false, it cannot be changed to true, and other features cannot be modified except writable. When the retriable is true, you can call Object. defineProperty () multiple times to modify the same attribute.

Modifying attributes that cannot be configured under non-strict conditions will be ignored, and an error will be thrown in strict mode.

Accessors include getter and setter functions. When reading the accessors attribute, call the getter function to return a valid value. When writing the accessors attribute, call the setter function to input a new value. It includes four features:

1. [[retriable]: indicates whether the attribute can be deleted through delete to redefine the attribute, whether the attribute can be modified, and whether the attribute can be changed to the accessors attribute.

2. [[Enumerable]: Indicates whether to use the for-in loop to return data.

3. [[Get]: The function called when reading the attribute. The default value is undefined.

4. [[Set]: The function called when writing an attribute. The default value is undefined.

Getter and setter do not have to appear in pairs. Only the getter function proves that this attribute is read-only and cannot be written. If you try to write data in non-strict mode, it will be ignored. In strict mode, an error will be thrown. Similarly, only the setter function proves that only writing is not readable, and undefined is returned in non-strict mode. An error is thrown in strict mode.

The accessors property cannot be directly defined. You must use Object. defineProperty () to define it, as shown below:

　　Var person = {_ name: "xiaochang", // The name attribute is read-only and cannot be written _ age: 100, and the // age attribute is only written as unreadable _ tel: 123456 // tel property readable and writable}; Object. defineProperty (person, "name", {get: function () {return this. _ name ;}}); Object. defineProperty (person, "age", {set: function (newage) {this. _ age = newage ;}}); Object. defineProperty (person, "tel", {get: function () {return this. _ tel;}, set: function (newtel) {this. _ tel = newtel ;}}); console. log (person. name); // "xiaochang" person. name = "CC"; // try to modify the name Attribute console. log (person. name); // "xiaochang" console. log (person. age); // unreadable attribute, undefinedperson. age = 200; // modify the ageconsole. log (person. _ age); // The attribute that can be accessed only by Directly Reading the object method. You can see that the value of 200console has been updated. log (person. tel); // 123456person. age = 654321; // update telconsole. log (person. tel); // 654321

The underline in front of the attribute indicates the attribute that can only be accessed through the object method. When we call person. name actually calls the getter function of the name attribute (directly calls person. _ name can get the same result. It makes no sense to do this ). In the above example, we can clearly see the relationship between attributes and accessors.

Supports Object. the browser of the defineProperty () method has IE9 + (IE8 is the first implementation Object. defineProperty () method browser, but limited to DOM objects, and can only create accessors), Firefox4 +, Safari5 +, Opera12 +, Chrome. [[Resumable] and [[Enumerable] cannot be modified in browsers that do not support the Object. defineProperty () method.

In Object. before the defineProperty () method, you need to create the accessors. Generally, the non-standard methods are used: __ defineGetter _ () and _ defineSetter __(), these two methods were initially introduced in Firefox and later supported by chrome1 and Opera9.5. Rewrite the above tel property accessors as follows:

　　person.__defineGetter__("tel",function(){ return this._tel;});person.__defineSetter__("tel",function(newtel){ this._tel = newtel;});

ECMAScript. 5 also defines the Object. defineProperties () method. This method contains two parameters: the Object where the attribute is located, the name of multiple attributes and the Object composed of its descriptor Object. It acts on the same Object. defineProperty (). The difference is that multiple attributes can be scheduled at a time. Browsers supporting this method include IE9 +, Firefox4 +, Safari5 +, Opera12 +, and Chrome. The preceding example can be rewritten as follows:

　　Var person = {_ name: "xiaochang", // The name attribute is read-only and cannot be written _ age: 100, and the // age attribute is only written as unreadable _ tel: 123456 // tel property readable and writable}; Object. defineProperties (person, {name: {get: function () {return this. _ name ;}, age: {set: function (newage) {this. _ age = newage ;}}, tel: {get: function () {return this. _ tel;}, set: function (newtel) {this. _ tel = newtel ;}}});

For the attribute features mentioned above, ECMAScript. 5. provides a method Object for obtaining the descriptor of a given attribute. getOwnPropertyDescriptor (). This method contains two parameters: the object where the attribute is located, and the attribute name of the descriptor to be read. Method returns an object. For example:

　　Var descriptor = Object. getOwnPropertyDescriptor (person, "tel"); for (attr in descriptor) {console. log (attr + ":" + descriptor [attr]);} the running result is as follows: get: function () {return this. _ tel;} set: function (newtel) {this. _ tel = newtel;} enumerable: falseconfigurable: false