JavaScript accessor implementation Instructions _javascript tips

The first is more common, and is implemented accessor by closure store value, which is suitable for all browsers.

Copy Code code 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 using closures for P152 pages in the JavaScript authoritative guide (Chinese version fifth).

Copy Code code 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 = {}; This is a 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 approach is to use __definesetter__ and __definegetter__ to implement accessor, and to see the underscore that they are not Standard, applies to Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+ and Opera 9.5+, using the method see MDN.

Copy Code code as follows:

Function Sandy (val) {
var value = val,
_watch = function (newval) {
Console.log (' Val are 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 ', ' get ' keyword to define accessor on a prototype object and apply to a single object, for Firefox 2.0+, Safari 3.0+, Google Chrome 1.0+ and Opera 9.5+.

Copy Code code 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;
}
}

In the last method, the static method of object is used to defineproperty a single object, and the method should belong to the category of ES5, now seemsOnly Chrome supports this approach, but Ie8 also supports it, but the action object is limited to DOM nodes (DOM node), see IEBlog, the use of this method is MDN.

Copy Code code as follows:

var Sandy = {}, RValue;
Object.defineproperty (Sandy, ' value ',
{
' Set ': function (val) {
RValue = val;
},
' Get ': function () {
return rValue;
},
' Enumerable ': true,
' Configurable ': 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'll now return "Content container"

' Enumerable ', ' Configuralbe ' belongs to the property Attributes (attribute attribute) in the ES5 specification, here is not discussed, interested Google or directly to see ES5 documents. ^ ^