Detailed introduction to JavaScript Getters and Setters platform support, etc.

From John Resig’s early articles, roughly translated for reference.
Happily, I think I can finally say, "Now, 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, used to get and set a certain value, such as:

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

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

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 above example "Hidden value attribute", our code looks like this:

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, but prefer to define getters and setters in the prototype of the object (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 seems incredible, but after using it for a while, it is 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.

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 realize object inheritance and also take into account getters and setters

// 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 Two new methods were discovered: __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, the name is i, object b has a getter, the name is also called 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:
Within 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 write Chrome, it has not been released yet)
I use the following code Test browser:

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

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

More JavaScript Getters and Setters Platform For detailed information on support and other related articles, please pay attention to the PHP Chinese website!