JavaScript Getters and Setters platform support

Source: Internet
Author: User

The article from John Resig's early years roughly translated it for memo.
Fortunately, I think I can finally say, "Currently, Getters and Setters of JavaScript are widely used, and they are closely related to the vital interests of every JavaScript developer ". By the way, I have been waiting for a long time to say this sentence.
First, let's get to know what Getters and Setters are and why they are useful. Next, let's see which platforms currently support Gettets and Setters.
Getters and Setters
Getters and Setters allow you to quickly obtain or set the data of an object. Generally, an object has two methods for obtaining and setting a value, for example: Copy codeThe Code is as follows :{
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 attributes that do not want external access to directly. The final code looks like the following (use a closure to save the value of the newly created Filed object ):Copy codeThe Code is 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 codeThe Code is as follows: 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. Our code is like this:Copy codeThe Code is as follows: function Field (val ){
Var value = val;
This. _ defineGetter _ ("value", function (){
Return value;
});
This. _ defineSetter _ ("value", function (val ){
Value = val;
});
}

However, you do not like writing like this, but tend to define getters and setters in the prototype of the object (private variables are not important). We can use another syntax.Copy codeThe 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 looks incredible, but it is easy to accept it after a while.
Next is another example. It allows the external world to obtain a username array, but cannot obtain the original, hidden user object.Copy codeThe 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 benefit, I have written a method that can help you implement Object Inheritance and take getters and setters into account.Copy codeThe 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;
}

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 a variety of errors, and I was completely dizzy. Later I found the problem lies in a simple statement: a [I] = B [I];
If object a has a setter named I, object B has a getter named I, and a [I] is not assigned a value through another setter method, it is the getter method from B. These two _ lookup * _ methods allow you to obtain the original function. (This section is a bit obscure. The original Article 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 funup 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. (Therefore, the value can have one getter and one setter, but the value never has two getters)
The only method to delete a getter or setter is delete object [name]. Delete can delete some common attributes, getters and setters.
If _ defineGetter _ or _ defineSetter __is used, it will overwrite the getter or setter with the same name as previously defined, or even the property ).
Platform
Supported browsers include:
Firefox
Safari 3 +
Opera 9.5
(Chrome hasn't been written in the original article)
I use the following code to test the browser::Copy codeThe Code is as follows: 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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.