Java Programmer's JavaScript learning Note (4--closure/getter/setter)

Plan to complete this note in the following order:

2. Idea.
4. Property replication and inheritance.
6. This/call/apply.
8. Closed Packet/getter/setter.
10. Prototype
12. Object-oriented simulation.
14. The basic mechanism of jquery.
16. jquery selector.
18. jquery Tool method.
20. jquery-extends at the class level.
22. jquery-extends at the "object" level.
24. jquery-extension Selector.
26. JQuery UI.
28. Extend the jquery UI.

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

1. Closed Package

Closures are a simple and useful language feature of JavaScript. By closures:
It makes up for the defect of the function without Public/private access control, and the security of the function internal variable 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.
Allows different instances of the function "class" to enjoy their own properties.
See below.

1.1. Protect Private variables1.1.1, principle

The main feature of closures is that when a function is returned as a return value, it is returned together with the environment of the function definition (including variables that the function can access), ensuring that the variables are not destroyed by the object they are attached to.
It's a little bit around, what does it mean? 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, internal variables have been destroyed due to function call completion

ChildCount is destroyed as the call to the UIObject function ends, and from another point of view, the variables inside the function are protected.
On this basis, if we have a way to ensure that the internal variables of the function are not destroyed, and provide methods for their access operations, the public method is implemented to access the private variable.
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 how to protect a private property with this feature of closures.

1.1.2, Grammar

Based on the code snippet 2, the code snippet 3 shows the code that can provide multiple methods to access the private property at the same time.
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: if 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, local variables have been destroyed due to function call completion
Ui.setchildcount (3); Due to 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. Closures are also generated.

1.2. When passing a function, pass the context simultaneously

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

1.3, different instances, to enjoy their own variables

We already know that the function will produce a closure during the pass. 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: compare Java and deepen your 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 in addition to the Set/set keyword at the time of definition. You can also add properties dynamically through the Object.defineproperty () function at run time, and provide finer control.
The code is as follows (none of the following code is experimental):
var o = {};
Object.defineproperty (o, ' propname ', {
The value of the value:1,//property can also be set by means of get:function () {Retun x;}
Whether the writeable:true,//can be o.propname = newvalue; method to set the value of the property
Whether the enumerable:false,//can be enumerated by the
Whether the configurable:true//can be configured with DefineProperty
});
In addition, there are a series of APIs to complete the configuration and detection of attributes. As follows:
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 whenever 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 with the characteristics, which is unreasonable and not beautiful. But the world is so imperfect.

JavsScript Natural Beauty, not to change her into a fighter, then who will be responsible for dowager it?

ECMAScript 5 is not a revolutionary innovation, nor a lifeline , the world could have been better.

Java Programmer's JavaScript learning Note (4--closure/getter/setter)