Discussion on the get/set accessor _javascript techniques of the new features of JavaScript ECAMSCRIPT5

ECMASCRIPT5 Introduction

First of all to find out ECMAScript is God horse, we know that JavaScript or livescript the beginning is Netscape out, and then Microsoft also followed up the jscript,scriptease also have their own cenvi, So there are three versions of the browser script to go their own way, people understand this messy, and then standardized issues are put on the agenda. The proposal, modelled on JavaScript1.1 in 1997, was submitted to the European Computer Manufacturers Association (E uropean C omputer M anufacturers A ssociation), and finally everyone sang a ecma-262-- A new scripting language standard called ECMAScript. The following year, ISO/IEC (International Organization for Standardization and Electrotechnical Commission) also adopted the ECMAScript as the standard, after all, the major browser manufacturers to ECMAScript as the basis for their respective implementation of JavaScript, of course, is only the basis, not exactly according to come, Otherwise we wouldn't have so many browser compatibility issues.

What is ECMASCRIPT5? As the name suggests, like IPhone5 is the fifth version of this strange Dongdong, we are now commonly used when ECMASCRIPT3, compared to the first two versions of this version is a real programming language rather than toys, become very popular.

Body:

The previous understanding of Get/set has been mistaken and found that get set is an object property method. Read someone else's blog There are many questions, today the system has done a lot of testing finally understand. (By reading and writing demo test, if there is not welcome to criticize)

The get/set accessor is not an object's property, but a property's attribute. We must be clear. Attributes are used only internally, so they cannot be accessed directly in JavaScript. In order to indicate that an attribute is an internal value, it is represented as [[Value]] by enclosing parentheses in both teams.

1. Briefly introduce the properties of these features (here is a simple endorsement)

(1) Data Properties--the location that contains a data value. This position can read and write values.

The data attribute has four attributes that describe its behavior:

[[Configurable]]: is configurable

[[Enumerable]]: is an enumerable

[[writable]]: readable

[[Value]]: property value

(2) Accessor Property Property--contains no data value, contains a getter and setter function (these two functions are not required)

Accessor properties also have four attributes that describe their behavior:

[[Configurable]]: is configurable

[[Enumerable]]: is an enumerable

[[Get]]: The function that is called when the property is read, the default is undefined

[[Set]]: The function that is called when the property is written, and the default is undefined

2. Here is a focus on [[Get]]/[[set]] what we call the Get/set accessor

Let's start with a book. Get/set accessor Behavior features: Get/set accessors can be defined, not defined, or read or written to property values. You can also define only one. Only get is defined, the property being described is readable and not writable. Only set is defined, the described property is writable and unreadable.

(1) Our original Get Set method is like this:

Function Foo (val) {
var value=val;
This.getvalue=function () {return
value;
};
This.setvalue=function (val) {
value=val;}
;
}
var obj=new Foo ("Hello");
Alert (Obj.getvalue ());//"Hello"
obj.setvalue ("HI");

The code above is just a get set method that is implemented using the closure scope, noting that the method is the property method of the instance object, not the attribute attribute. If not defined, value value cannot be accessed

Function Foo (val) {
var value=val;
/* This.getvalue=function () {return
value;
};
This.setvalue=function (val) {
value=val;
};
*
/} var obj=new Foo ("Hello");
alert (obj.value);//undefined

The following example is the property method of an object, not an attribute attribute.

var obj={
Name: "John",
Get:function () {return
this.age;
} Only get is defined, no set is defined, but it can still be read, write, Name property, even if this is age
//the method defined here does not affect the Get,set attribute of the attribute. Just plain object Properties
};
alert (obj.name);//john readable
obj.name= "Jack";//Writable

(2) An get/set accessor that is an attribute of the accessor property.

Say it again. Objects are not properties, they determine whether the property can, how to read and write. If you do not set it, you can read and write as usual (the property is readable

Write, read-write access is the value of the property itself

There are two ways to change the Get/set attribute of a property:

A. is to use Object.defineproperty ()

var object={
_name: "Daisy" 
};
Object.defineproperty (Object, "name", {//) the method name name, which means that a Name property is defined (so that it can be accessed through Object.name), defines only getter accessors, and does not define [ Value]
is get:function () {///Only The Get attribute is defined, so read only cannot write return
this._name
}
});
alert (object.name);//"Daisy"
object.name= "Jack";//Only getter accessors are defined, so write invalidation

Note the property names in Object.defineproperty (object,pro,{}) must correspond to the properties accessed by Object.pro

B. Just use the Get Set keyword:

var object={
_name: "Daisy", Get
name () {//* Here's method name name, Indicates that a Name property is defined (so that it can be accessed through object.name), only getter accessors are defined, and no [[value]] value return this._name is defined.
The Get,set method is only the attribute, not the object method, determines whether the attribute can and how to read and write
};
alert (object.name);//Daisy here to remove the underline method is Daisy; plus is undefined
object.name= "Jack";//Only getter accessors are defined, so you can only read and write

Both of these methods are equivalent. Note that there will be two attributes in both of these methods object objects: _name (with initial value) name (no initial value), which can be seen through the browser console

So when does this name attribute really define? We know that Object.defineproperty (object,pro,{}) can define a new property pro for an object, since get Pro () {}/set Pro () {} and Object.defineproperty (object, pro,{}) is equivalent, a new property Pro is also defined. That's why there are two attributes in object.

(3) The beauty of the web in this article the implementation code of the Get and set accessor in JavaScript for the standard standard of Get and set accessors: the thought that triggered

I wrote one of the same examples myself.

Function Foo (val) {
this.value=val;//defines the Value property and does not define _value
}
foo.prototype={
set Value (val) {// Note that the method name and the property name are the same, and the Value property This._value=val is defined in prototype, and get
value () {//Method name and property name are the same. 　　　　The Value property and its get attribute return This._value} are defined in the prototype, and the
//accessor returns and sets the _name, which does not define the _name attribute and why it can be read or written???? 　　　　
var obj=new Foo ("Hello");
alert (obj.value);//"Hello"
obj.value= "Yehoo";

In order to solve the above question, did a lot of testing, we look at:

First look at this example, in the prototype only to define the Get feature, in the Obj.value read the Value property, in the instance to find no, and then found in the prototype, the call is the prototype get method, can only read can not write

Function Foo (val) {
this._value=val;//the attribute here is underlined, initializes the _value property of the instance object, and the _value property is readable and writable
}
foo.prototype={
//Set Value (val) {//Note that the method name and the property name are the same, the value attribute
//this._value=val is defined in the prototype;
The Get
value () {//method name is the same as the property name, and the Value property and its get attribute return
this._value
} 
are defined in prototype; var obj=new Foo ("Hello");
alert (obj.value);//hello access is prototype inside the Value property
obj.value= "Yehoo";//only The Get attribute of the Name property is defined, so that only read cannot write, write fails

If the constructor inside This._value removes the underscore, the value attribute defined in the prototype defines the Get attribute. You can still control the reading and writing of the Value property. That is, when Obj.value accesses the property, it invokes the Get method, first looking in the object itself, if not, then to the prototype, if none is defined, the default is both readable and writable

Function Foo (val) {
this.value=val;//only defines the get attribute of value in the prototype, so write invalid
}
foo.prototype={
//Set Value ( val) {//Note the same method name and property name, the set attribute of the Value property//This._value=val is defined in prototype
;
},
//value: "hah", even if the value is manually written, because the Get method returns This._value, the value cannot be read correctly: "hah"
//Just declare get Pro () {} and Set Pro () {} property can read and write, but if the function is defined incorrectly, it still cannot be accessed as required to the correct property value get
value () {//Method name and property name, which defines the Value property and its get attribute return in prototype
This._value;
}
; 
var obj=new Foo ("Hello");//"Hello" is not written
to Success alert (obj.value);//undefined 
obj.value= "Yehoo";//Only defined get attributes. So you can only read and write, write invalid

To prove that the above example is readable and not writable: Manually write _value: "Hah", you can read value but not write.

Function Foo (val) {
this.value=val;//only defines the get attribute of value in the prototype, so write invalid
}
foo.prototype={
//Set Value ( val) {//Note the same method name and property name, the set attribute of the Value property//This._value=val is defined in prototype
;
},
_value: "hah", even if the value is manually written, because the Get method returns This._value, the value cannot be read correctly: "hah"
//As long as you declare get Pro () {} and Set Pro ( {} property can read and write, but if the function definition is wrong, it still cannot be accessed as required to the correct property value get
value () {//Method name and property name, which defines the Value property and its get attribute return in prototype
This._value;
}
; 
var obj=new Foo ("Hello");//"Hello" is not written
to Success alert (obj.value);//"hah" 
obj.value= "Yehoo";//Only The Get attribute is defined. So you can only read and write, write invalid

If the manual write is value: "Hah", can you try to read values for value? Because the This._value returned by the Get method is not defined, the Obj.value read value calls the Get value () {} method invalid, but value is still not writable.

Function Foo (val) {
this.value=val;//only defines the get attribute of value in the prototype, so write invalid
}
foo.prototype={
//Set Value ( val) {//Note the same method name and property name, the set attribute of the Value property//This._value=val is defined in prototype
;
},
value: "hah", even if the value is manually written, because the Get method returns This._value, the value cannot be read correctly: "hah"
//As long as the Get Pro () {} and Set Pro () are declared {} property can read and write, but if the function definition is wrong, it still cannot be accessed as required to the correct property value get
value () {//Method name and property name, which defines the Value property and its get attribute return in prototype
This._value;
}
; 
var obj=new Foo ("Hello");/"Hello" is not written to Success
alert (obj.value),//undefined read is invalid because as long as Obj.value will call get, and gets returns this. _value, there is no such value, so the undefined
obj.value= "Yehoo";//Only The Get attribute is defined, so read only cannot write, write invalid

Looking at this example, get set is defined, but returns an undefined this._value. You can find that value is both readable and writable. Remove the Get Set method inside the prototype, still readable and writable

Function Foo (val) {
this.value=val;
}
foo.prototype={
Set Value (val) {
this._value=val;
}, get
value () {return
this._value;
}
}; 
var obj=new Foo ("Hello");
alert (obj.value);//hello 
obj.value= "Yehoo";
alert (obj.value);//yehoo 
function Foo (val) {
this.value=val;
}
And the usual operation is the same, is back to the default state that does not define Get/set accessor attributes
var obj=new Foo ("Hello");
alert (obj.value);//hello 
obj.value= "Yehoo";

Summarize

Only the Get Pro () {} property is declared readable and not writable;

Declaring only the Set Pro () {} property can write unreadable.

If none is declared, the property is readable and writable;

If both are declared, read and write according to the method defined by the Get set;

If all are declared, but the defined read-write method is not correctly read and write, Get/set invalid. becomes the default readable writable

The value attribute defined in prototype defines the Get attribute. You can still control the reading and writing of the Value property. That is, when Obj.value accesses a property, it invokes the Get method, first looking in the object itself, if not, then to the prototype search, if none is defined, and the default is both readable and writable.

Add:

Whether with get Pro () {}/set Pro () {} 

or Object.defineproperty (object,pro,{


get:function () {return
This._name;
} });

Pro cannot and return this. The following attributes are the same, or they will be reported as follows: (specifically I do not know why, as if the stack overflow caused by their own calls)

After the great God, understand why there is an error: in Get Value () {} method to return This.value, it will call the value get method, and therefore plunged into a dead loop, causing the method stack overflow.