JavaScript closures - block scope and private variables

Block-level scope

Block-level scope refers to the scope within the code block wrapped by curly braces. There is no block scope in JavaScript. In order to understand this concept, look at the following example:

for(var i = 0;i < 10; i++){
  ......
}
alert(i); //结果会输出10

In the above code, we defined the variable i in the for loop. In programming languages ​​​​such as C++ and Java, after the loop execution ends, the i variable in the for loop will Immediately garbage collected. But in JavaScript, variables will always exist regardless of whether a loop or some judgment is used. We can see from the print results that the value printed after the for loop ends is 10.

When a variable is used in the global environment for looping or judgment, this variable may affect the variables in the function, so do not use global variables except under special circumstances, and global variables are at the top of the scope chain. Access is the slowest.

The solution to block scope is to use anonymous functions. Let’s look at the code below.

(function(){
  for(var i = 0; i < 10; i++){
    ......
  }
})();
 
// 直接打印i值会报错：i没有定义
alert(i);
 
// i is not defined
function fn(){
  alert(i);
}
fn();

In the above code, we put the code block into an anonymous function and then called the anonymous function immediately. Notice the pair of parentheses after the anonymous function, which indicates the call to the anonymous function. You can see this style of writing in many JavaScript programs. At this time, the variables in the anonymous function will be recycled after use, and these variables cannot be accessed outside the anonymous function.

When we are doing team development, we may need to define global variables with the same name, so we need to develop the following habits during development: put the code of the global variable into an anonymous function, and call the anonymous function immediately, In this way, the code of global variables can also be executed, but these variables are controlled in the scope we want to control.

Private variables

When we defined an object earlier, we used the this keyword to set the properties of the object. The properties set in this way are called public properties, and we can access these properties directly through the object.

In programming languages ​​such as C++ and Java, the private keyword is used to define the private properties of an object. Private properties cannot be directly accessed by the object. So how do you define private properties (private variables) in JavaScript? In fact, it is very simple. We only need to provide a pair of set and get methods for the object. For example, the following code:

function Person(name){
  //此时就没有方法直接访问name这个属性，因为没有this.name
  //要访问name只能通过this.getName和this.setName来访问
  this.setName = function(value){
    name = value;
  }
  this.getName = function(){
    return name;
  }
}
 
var p = new Person("Leon");
alert(p.getName());

We use the this.setName() method to set the name attribute for the object, and use the this.getName method to get the name attribute of the object. In this way, the name attribute of the object cannot be directly accessed because there is no this.name attribute.

The problem with using the above method to create private variables is that each object stores a large number of functions, which consumes a lot of memory. The solution to this problem is to use static private variables. The code is as follows:

var name = "";
var Person= function(value){
  name = value;
}
Person.prototype.setName = function(value){
  name = value;
}
Person.prototype.getName = function(){
  return name;
}
 
var p1 = new Person("Leon");
alert(p1.getName());
p1.setName("Ada");
alert(p1.getName());

By putting the setName() and getName() methods into the prototype chain of the object, the problem of multiple copies of the method can be solved. However, the above code has some security risks, which are the block-level scope issues we mentioned earlier. Similarly we can put this code into an anonymous function to solve this problem.

(function(){
  //name在函数结束之后就被回收，在外面是没有方法接收的
  var name = "";
  Person= function(value){
    name = value;
  }
  Person.prototype.setName = function(value){
    name = value;
  }
  Person.prototype.getName = function(){
    return name;
  }
})();
 
var p1 = new Person("Leon");
alert(p1.getName());
p1.setName("Ada");
alert(p1.getName());

Put the definition of the Person class into an anonymous function, and then execute the anonymous function immediately. This not only ensures that the object cannot be used to access properties directly, but also ensures that each object shares a copy of the method.

The above is the content of JavaScript closures-block-level scope and private variables. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!