In-depth understanding of block-level scope, private variables and module mode in JavaScript (graphic tutorial)

This article introduces the block-level scope, private variables and module mode in JavaScript in detail, which is very helpful for learning JavaScript.

This article introduces the block-level scope, private variables and module mode in JavaScript in detail. I won’t go into too much nonsense. The details are as follows:

1. Block-level scope (Private scope), is often used outside functions in the global scope, thereby limiting the addition of too many variables and functions to the global scope.

(function(count){ 
  for(var i=0;i<count;i++){ 
    console.log(i);//=>0、1、2、3、4 
  } 
  console.log(i);//=>5 
})(5);

(function(){ 
  var now=new Date(); 
  if(now.getMonth()==0 && now.getDate()==1){ 
    console.log("新年快乐"); 
  }else{ 
    console.log("尽情期待"); 
  } 
})();

2. Private variables: Any variables defined in a function can be considered private variables, because these variables cannot be accessed outside the function.

Privileged methods: Public methods that have access to private variables and private functions are called privileged methods.

2.1) Define privileged methods in the constructor:

 function Person(name){ 
  this.getName=function(){ 
    return name; 
  }; 
  this.setName=function(value){ 
    name=value; 
  }; 
} 
var person1=new Person("Jason"); 
console.log(person1.getName());//=>Jason 
person1.setName("gray"); 
console.log(person1.getName());//=>gray 
var person2=new Person("Michael"); 
console.log(person1.getName());//=>gray 
console.log(person2.getName());//=>Michael 
person2.setName('Alex'); 
console.log(person1.getName());//=>gray 
console.log(person2.getName());//=>Alex

The disadvantage of the constructor pattern is that the same set of new methods will be created for each instance.

2.2) Static private variables to implement privileged methods

In the private scope, first define private variables and private functions, and then define the constructor and its public methods.

 (function(){ 
  //私有变量和函数 
  var name=""; 
  Person=function(value){ 
    name=value; 
  }; 
  //特权方法 
  Person.prototype.getName=function(){ 
    return name; 
  }; 
  Person.prototype.setName=function(value){ 
    name=value; 
  } 
})(); 
var person1=new Person("Jason"); 
console.log(person1.getName());//=>Jason 
person1.setName("gray"); 
console.log(person1.getName());//=>gray 
var person2=new Person("Michael"); 
console.log(person1.getName());//=>Michael 
console.log(person2.getName());//=>Michael 
person2.setName('Alex'); 
console.log(person1.getName());//=>Alex 
console.log(person2.getName());//=>Alex

3. Module pattern: Singletons can be enhanced by adding private variables and privileged methods.

If you must create an object and initialize it with some data, while also exposing some methods that can access these private data, you can use the module pattern.

var application=function(){ 
  //私有变量和函数 
  var components=[]; 
  //初始化 
  components.push(new BaseComponent()); 
  //公共接口 
  return { 
    getComponentCount:function(){ 
      return components.length; 
    }, 
    registerComponent:function(){ 
      if(typeof component=="object"){ 
        components.push(component); 
      } 
    } 
  } 
}();

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

jsInstance of executing a function after the code is delayed for a certain period of time

Detailed explanation of how to use JS hash to create a single-page web application

JS simple implementation of floating windows

The above is the detailed content of In-depth understanding of block-level scope, private variables and module mode in JavaScript (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!