Detailed introduction to JavaScript's Getters and Setters platform support_javascript skills

An article from John Resig's early years, roughly translated as a reminder.
Happily, I think I can finally say, "Nowadays, JavaScript's Getters and Setters are very widely used, and it is closely related to the vital interests of every JavaScript developer." Damn, I've been waiting a long time to say this.
First, let’s take a quick look at what Getters and Setters are and why they are useful. Then, let's take a look at which platforms currently support Gettets and Setters.
Getters and Setters
Getters and Setters allow you to quickly get or set the data of an object. Generally speaking, an object has two methods, which are used to get and set a certain value, such as:

Copy code Code As follows:

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

An obvious benefit of writing JavaScript in this way is that you can use it to hide properties that you don’t want the outside world to access directly. The final code looks like the following (using a closure to save the value of the newly created Field object):

Copy code Code As follows:

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

So we can use it like this:

Copy code The code is as follows:

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

Let’s simulate the above example "Hidden value attribute", our code looks like this:

Copy code The code is as follows:

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

But, you don’t like to write like this, and prefer to write it in the object’s prototype To define getters and setters in (it doesn't matter where the private variables are written), we can use another syntax.

Copy code The code is as follows:

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

This syntax may seem weird, but after using it for a while, it’s easy to accept it.
The following is another example, which allows the outside world to obtain a username array, but cannot obtain the original, hidden user object.

Copy code The code is as follows:

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

As a bonus, I wrote a method that can help you implement object inheritance, and also takes into account getters and setters

Copy code The code is as follows:

// Helper method for extending one object with another
function extend(a,b) {
for ( var i in b ) {
var g = b.__lookupGetter__(i), s = b.__lookupSetter__(i);
if ( g || s ) {
if ( g )
a.__defineGetter__(i, g);
if ( s )
a.__defineSetter__(i, s);
} else
a[i] = b[i];
}
return a;
}

In my extend() method, you will find two new methods: __lookupGetter__ and __lookupSetter__. This will be useful once you actually start using getters and setters.
For example, when I first wrote the extend() method, I encountered various errors and I was completely dizzy. Later I found that the problem lies in a simple statement: a[i] = b[i];
If object a has a setter named i, object b has a getter also named i, a[ i] is not assigned through other setter methods, but from the getter method of b. These two __lookup*__ methods allow you to obtain the original function. (This paragraph is a bit obscure, the original text is as follows)

If a setter existed in object a, named i, and a getter existed in object b, named i, a[i]'s value was being set not to the other setter function, but to the computed value from b's getter function. The two __lookup*__ methods allow you to access the original functions used for the methods (thus allowing you to write an effective extend method, for example).
　
Remember the following points:
In an object, each variable can only have one getter or setter. (So ​​value can have a getter and a setter, but value never has two getters)
The only way to delete a getter or setter is: delete object[name]. delete can delete some common properties, getters and setters.
If you use __defineGetter__ or __defineSetter__, it will override the previously defined getter or setter of the same name, even the property.
Platform
Supported browsers are :
Firefox
Safari 3
Opera 9.5
(The original text did not mention Chrome, not yet (out)
I used the following code to test the browser:

Copy the code The code is as follows:

javascript:foo={get test(){ return "foo"; }};alert(foo.test);

In addition, the following two engines also Supports Getters and Setters:
SpiderMonkey
Rhino 1.6R6 (New)