JavaScript Accessor implementation instructions_javascript skills

The first one is relatively common. It implements accessor by closing Store Value and 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 page P152 of the Definitive Guide to JavaScript (Fifth Chinese Edition) An example of using closures.

Copy code 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 demonstrates 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 the accessor. Look at the underlines and you will know that they are not standard and are suitable for Firefox 2.0, Safari 3.0, and Google Chrome 1.0 and Opera 9.5, please see MDN.

Copy code 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 accessors on the prototype object. It is also applicable to a single object. It is applicable to Firefox 2.0 and Safari 3.0 , Google Chrome 1.0 and Opera 9.5.

Copy code 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 method defineProperty of Object, which acts on a single object. This method should belong to the category of ES5. Currently it seems that only Chrome supports this Method, in fact, Ie8 also supports it, but the operation object is limited to Dom node (Dom node), see IEBlog. For the use of this method, see MDN.

Copy code The code is 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 will now return "Content container"

'enumerable','configuralbe' belongs to the Property Attributes (attribute characteristics) in the ES5 specification. I will not discuss it here. If you are interested, you can Google it directly. ES5 documentation. ^ ^