JavaScript closure example _ javascript skills

As we all know, JavaScript has no block-level scope and only function scope. It means that the parameters and variables defined in the function are invisible outside the function, while the variables defined at any position inside the function are, this can be seen anywhere inside the function. The benefit of this is that internal functions can access parameters and variables that define their external functions.

First, we construct a simple object.

The Code is as follows:

Var testObj = {
Value: 10,
Add: function (inc ){
This. value + = (typeof inc = "number ")? Inc: 1;
}
};

TestObj. add ();
TestObj. value; // 11

TestObj. add (2 );
TestObj. value; // 13

In this case, there is a problem. The value cannot be modified illegally. You can modify it as follows.

The Code is as follows:

Var testObj = (function (){
Var value = 10;
Return {
Add: function (inc ){
Value + = (typeof inc = "number ")? Inc: 1;
},
GetValue: function (){
Return value;
}
};
})();

TestObj. add ();
TestObj. getValue (); // 11

TestObj. add (2 );
TestObj. getValue (); // 13

We can call a function to initialize testObj. This function returns an object literal and defines a value variable in the function. This variable is always available for the add and getValue methods, but the function scope makes it invisible to other programs. At the same time, we can draw a conclusion that internal functions have a longer life cycle than their external functions.

Let's continue to look at a constructor call example.

The Code is as follows:

Var MyObj = function (str ){
This. status = str;
};

MyObj. prototype. getStatus = function (){
Return this. status;
};

Var obj = new MyObj ("javascript ");
Obj. getStatus (); // "javascript"

There is nothing wrong with writing this way, but there will be one thing to do. Why use the getStatus method to access a property that can be directly accessed? It makes sense if status is a private property.

The Code is as follows:

Var obj = function (status ){
Return {
GetStatus: function (){
Return status;
}
};
};

Var myObj = obj ("javascript ");
MyObj. getStatus (); // "javascript"

When obj is called, it returns a new object containing the getStatus method, and a reference of this object is stored in myObj, even if obj has already been returned, however, the getStatus method still has the permission to access the status attribute of the obj object. The getStatus method does not access a copy of this parameter. It accesses the parameter itself. This is possible because the function can access the context where it was created, which is called a closure.