JavaScriptAccessor implementation note _ javascript skills

There will be no stranger to Getter and Setter. The following describes several methods that I know to implement GS in JavaScript. the first method is more common. The accessor is implemented through the closure Store Value, which is suitable for all browsers.

The Code is as follows:

Function Sandy (val ){
Var value = val;
This. getValue = function (){
Return value;
};
This. setValue = function (val ){
Value = val;
};
}
// Usage
Var sandy = new Sandy ("test ");
Sandy. value
// => Undefined
Sandy. setValue ("test2 ")
Sandy. getValue

The following is an example of the closure used on page P152 In the JavaScript authoritative guide (Chinese Version 5.

The Code is as follows:

Function makeProperty (o, name, predicate ){
Var value; // This is property value;

// The setter method simply returns the value
O ['get' + name] = function () {return value ;};

// The getter method stores the value or throws an exception if
// The predicate rejects the value
O ['set' + name] = function (v ){
If (predicate &&! Predicate (v ){
Throw 'set' + name + ': invalid value' + v;
} Else {
Value = y;
}
}
}

// The following code demenstrates the makeProperty () method
Var o ={}; // Here is an empty object

// Add property accessor methods getName and setName
// Ensure that only string values are allowed
MakeProperty (o, 'name', function (x) {return typeof x = 'string ';});

O. setName ('Frank '); // Set the property value;
Print (o. getName (); // Get the property value
O. setName (0); // Try to set a value of the wrong type

The second method is to use _ defineSetter _ and _ defineGetter _ to implement accessor. You can see that they are not StandardApplicable to Firefox 2.0 +, Safari 3.0 +, Google Chrome 1.0 +, and Opera 9.5 +.

The Code is as follows:

Function Sandy (val ){
Var value = val,
_ Watch = function (newVal ){
Console. log ('val is Changed to: '+ newVal );
}

This. _ defineGetter _ ("value", function (){
Return value;
});

This. _ defineSetter _ ("value", function (val ){
Value = val;
_ Watch (val );
});
}

Var sandy = new Sandy ("test ");
Sandy. value
// => Test
Sandy. value = "test2 ";
// => 'Val is Changed to: test2'
Sandy. value
// => "Test2"

In addition to _ defineG/Setter _, you can also use the 'set' and 'get' keywords to define the accessor on the prototype object. It is also applicable to a single object and is applicable to Firefox 2.0 +, safari 3.0 +, Google Chrome 1.0 +, and Opera 9.5 +.

The Code is as follows:

Function Sandy (val ){
This. value = val;
}

Sandy. prototype = {
Get value (){
Return this. _ value;
},
Set value (val ){
This. _ value = val;
}
};

// Or

Var sandy = {
'_ Value': 'sandy ',
Get value (){
Return this. _ value;
},
Set value (val ){
This. _ value = val;
}
}

The last method uses the static Object method defineProperty to act on a single Object. This method should belong to the scope of ES5. Currently It seemsOnly Chrome supports this method. In fact, Ie8 also supports this method, but the operation object is limited to Dom nodes. For details, see IEBlog. For details about how to use this method, see MDN.

The Code is as follows:

Var sandy ={}, rValue;
Object. defineProperty (sandy, 'value ',
{
'Set': function (val ){
RValue = val;
},
'Get': function (){
Return rValue;
},
'Enumerable': true,
'Retriable': true
}
)
// Ie8 +
Object. defineProperty (document. body, "description ",{
Get: function (){
Return this. desc;
},
Set: function (val ){
This. desc = val;
}
});
Document. body. description = "Content container ";
// Document. body. description will now return "Content container"

'Enumerable' and 'externalbe' belong to the Property Attributes (attribute Attributes) in ES5 specifications. We will not discuss them here. If you are interested, Google or go to ES5 documents. ^