Java Program Ape JavaScript learning Note (4--off/getter/setter)

To plan and complete this example, the order of the Notes is as follows:

2. Java Program Ape's JavaScript Learning notes (concept)
4. Java Program Ape's JavaScript Learning notes (2--property copy and inheritance)
6. Java Program Ape's JavaScript Learning Note (3--this/call/apply)
8. Java Program Ape's JavaScript Learning Note (4--this/closure/getter/setter)
10. Java Program Ape's JavaScript Learning Note (5--prototype)
12. Java Program Ape's JavaScript Learning Note (6--Object-oriented simulation)
14. Java Program Ape's JavaScript Learning notes (7--jquery basic mechanism)
16. Java Program Ape's JavaScript learning Note (8--jquery selector)
18. Java Program Ape's JavaScript Learning Note (9--jquery tool method)
20. Java Program Ape's JavaScript Learning notes (10--jquery-at "class" level)
22. Java Program Ape's JavaScript Learning notes (11--jquery-at "object" level)
24. Java Program Ape's JavaScript Learning note (12--jquery-extension selector)
26. Java Program Ape's JavaScript Learning Note (13--jquery UI)
28. Java Program Ape's JavaScript Learning notes (14--extended jquery UI)

This is the 4th note, talk about closure/getter/setter. Look at the scope of variables in JavaScript and how to implement encapsulation.

Author Blog: Http://blog.csdn.net/stationxp

Author Micro-Blog: http://weibo.com/liuhailong2008

Reprint please obtain the author permission

1. Closed Package

Closures are a simple and useful language feature of JavaScript. By closures:
Make up the defect that the function does not have access to the public/private such as permission control. The security of the variables inside the function is protected.

So that when the function object is passed as a parameter, it not only passes the arithmetic logic, but also passes the related variable at the same time.

Make different instances of the function "class". Enjoy your own attributes.
See below.

1.1. Protect Private variables1.1.1, principle

The most basic feature of closures is that when a function is returned, it is returned with the context of the function definition (the variable that the function can access to), ensuring that the variables are not destroyed by the object they are attached to.
A bit around, what do you mean by detail? Look at the following code:
Code Snippet 1
function UiObject () {
var childCount = 0; function internal variables,
return 0;
}

var funcreturnvalue = UiObject (); Call function, return 0
Console.log (Uiobject.childcount); Output: undefined because the function call is complete. Internal variables have been destroyed

ChildCount is destroyed as the call to the UIObject function ends, and there is a point of view. The variables inside the function are protected.
On this basis, suppose we have a way to ensure that the internal variables of a function are not destroyed. and provide methods to access them. The public method is also implemented to access the private variables.

The code is as follows:
Code Snippet 2
function UiObject () {
var childCount = 0; function Internal variables
function Getchildcount () {
ChildCount = 6;
return childCount;
}
return getchildcount;
}
var funcreturnfobject = UiObject (); Call function, return Getchildcount function, return value is a closed packet
Console.log (Funcreturnfobject ()); Output: 6
Let's take a look at the following, assuming that this feature of closures enables the protection of private properties.

1.1.2, Grammar

On the basis of code snippet 2, code snippet 3 shows the code. Ability to provide multiple methods at the same time to access private properties.
Code Snippet 3
function UiObject () {
var childCount = 0; function Internal variables

return {
Getchildcount:function () {
return childCount;
},
Setchildcount:function (CNT) {
ChildCount = CNT;
}
};
}

var o = UiObject (); Call function, return Getchildcount function, return value is a closed packet
O.setchildcount (6);
Console.log (O.getchildcount ()); Output: 6

Think: suppose var childCount = 0; Change to This.childcount = 0; It?
We have studied this before, "This.childcount = 0; "Statement is a property that attaches childcount as the caller, this.childcount the same life cycle as the caller.

This does not conflict with closures.

Code Snippet 3 can also be written in the form of code Snippet 4.

Code Snippet 4
function UiObject () {
var childCount = 0; function Internal variables
This.setchildcount = function (CNT) {
ChildCount = CNT;
};
This.getchildcount = function () {
return childCount;
};
}

var ui = new UiObject (); Call function, return retobj
Console.log (Ui.childcount); Output: Undefined, because the function call is complete, the local variable has been destroyed
Ui.setchildcount (3); Because of the effect of closures. The UI still holds the variable childcount and operates on it
Console.log (Ui.getchildcount ()); Output: 3

"This.setchildcount = function (cnt) {childCount = cnt; }; "This statement is equivalent to defining a function inside UIObject and" passing "it to the UI object. The same produces closures.

1.2, transfer function. Pass context at the same time

From the example above, we have seen this feature.
It can be exploited in a detailed application scenario.

1.3, different instances, to enjoy their own variables

We already know. The function generates a closure during delivery. Is the closure generated for the same method the same, or does it create a different copy for each pass?
Look at the following code:
Code Snippet 5
function UiObject () {
var childCount = 0; function Internal variables

return {
Getchildcount:function () {
return childCount;
},
Setchildcount:function (CNT) {
ChildCount = CNT;
}
};
}

var ui1 = UiObject ();
var ui2 = UiObject ();

Ui1.setchildcount (1);
Ui2.setchildcount (2);

Console.log (Ui1.getchildcount ()); Output:1
Console.log (Ui2.getchildcount ()); Output:2

Each generation of closures is a different copy.

Think: against Java. Deepen understanding.

2, Getter/setter

Javascript
Code Snippet 6
var UIPanel ={
_type: ' Panel ',
_width:-1,
_height:-1,

Get Type () {return this._type;},

Get width () {return this._width;},
Set Width (v) {this._width = V;},

Get height () {return this._height;},
Set Height (v) {this._height = V;}
};

Uipanel.type = ' TextField '; does not work
Console.log (' type: ' +uipanel.type); Ouput:type:Panel

Uipanel.width = 800; //
Console.log (' width: ' +uipanel.width); ouput:width:800

There are more and more object-oriented paradigms in grammar.
Controls the Read and write permissions of a property, except when defined, by Set/setkeyword. It is also possible to add properties dynamically through the Object.defineproperty () function during the execution period. and provides finer control.

Code such as the following (the following code is not experimental):
var o = {};
Object.defineproperty (o, ' propname ', {
The value of the value:1,//property can also be passed get:function () {Retun x. } The method setting
writeable:true,//can be enough through o.propname = newvalue; method to set the value of the property
ENUMERABLE:FALSE,//can be enumerated through
configurable:true//can be configured with DefineProperty
});
In addition, another series of API can complete the configuration of properties, detection. For example, the following:
Object.getownpropertydescriptor{{x:1}, "X"}
Object.keys (obj); Get all enumerable instance properties on an object
Object.getownpropertynames (obj);//Get all the "instance properties" on the object
Obj.hasownproperty (' id '); Returns true only if the object obj has a property ID, regardless of whether the ID is enumerable.

3. Summary

When most people are accustomed to object -oriented thinking and methods, language needs to be satisfied from the characteristics. It's not reasonable, it's not beautiful. But the world is so imperfect.

Javs script is a natural beauty. not to change her into a fighter, then who will be responsible for dowager?

ECMAScript 5 is not a revolutionary innovation, nor is it a life- saving straw . the world could have been better.

Copyright notice: This article blog original article. Blogs, without consent, may not be reproduced.

Java Program Ape JavaScript learning Note (4--off/getter/setter)