Introduction of setter and getter Methods in JavaScript

  • 2021-07-02 23:05:33
  • OfStack

setter and getter in javascript are methods with less contact at ordinary times, and they are not standard methods in themselves. They are only supported in non-ie browsers (ie kernel may have other methods to do it? I don't know the solution for the time being), but many things can be done by using them, such as:

1. Access restrictions to data:

a. value is an getter method call to the value variable. If an exception is thrown in the getter method implementation, access to the value variable can be blocked

2. Monitor the dom variable:

window. name is a very easy-to-use dom attribute across domains (well-known, see Baidu for details). If setter implementation covers window. name, cross-page memory asynchronous communication can be realized

3. Use your imagination and do a lot of things

The following are all transferred:
First, let's get a quick look at what Getters and Setters are and why they are useful. Then, let's look at which platforms now support Gettets and Setters.

Getters and Setters

Getters and Setters allow you to quickly retrieve or set data for 1 object. 1 Generally speaking, an object has two methods for getting and setting a value, such as:


{
getValue: function(){
return this._value;
},
setValue: function(val){
this._value = val;
}
}

One obvious benefit of writing JavaScript in this way is that you can use it to hide properties that you don't want to be accessed directly by the outside world. The final code looks like this (saving the value of the newly created Filed object with a closure):


function Field(val){
var value = val;
this.getValue = function(){
return value;
};
this.setValue = function(val){
value = val;
};
}

So we can use it like this:


var field = new Field("test");
field.value
// => undefined
field.setValue("test2")
field.getValue()
// => "test2" 

Let's simulate the "hidden value attribute" in the above example, and our code looks like this:


function Field(val){
var value = val;
this.__defineGetter__("value", function(){
return value;
});
this.__defineSetter__("value", function(val){
value = val;
});
}

However, you don't like to write like this, and prefer to define getters and setters in prototype of objects (it doesn't matter where the private variables are written). We can use another syntax.


function Field(val){
this.value = val;
}
Field.prototype = {
get value(){
return this._value;
},
set value(val){
this._value = val;
}
};

This syntax may seem incredible, but after a period of use, it is easy to accept.

Next is another example, which allows the outside world to fetch an username array, but cannot fetch the original, hidden user object.


function Site(users){
this.__defineGetter__("users", function(){
// JS 1.6 Array map()
return users.map(function(user){
return user.name;
});
};
}

Remember the following:

There can only be 1 getter or setter per variable within 1 object. (So value can have one getter and one setter, but value never has two getters.)
The only way to delete getter or setter is delete object [name]. delete removes 1 common attribute, getters and setters.
If you use __defineGetter__ or __defineSetter__, it overrides an getter or setter with the same name, or even an attribute (property), previously defined.

Platform

Supported browsers are:

Firefox
Safari 3+
Opera 9.5


Related articles: