Home > Web Front-end > JS Tutorial > Easily learn Javascript closure functions_javascript tips

Easily learn Javascript closure functions_javascript tips

WBOY
Release: 2016-05-16 15:25:40
Original
951 people have browsed it

What is a closure function?When you first start learning closures, it is probably difficult for everyone to understand. Judging from its official explanation, it is relatively conceptual.

But we still start from the meaning of closure.
Closure means that a function has free and independent variables. In other words, a function defined in a closure can "remember" the environment in which it was created.
After the official explanation, let’s first look at a simple counting example.

var c = 0;
function count(){
c++;
}
count();// 1
count();// 2
Copy after login

This example is implemented using global variables, but there is a problem here. The variable c is also easily called by other methods. At this time, the stored value of c may be changed, causing the count to become invalid. Then How to deal with this problem well! What we will think of is to use local variables to deal with it. For example:

function count(){
 var c = 0;
 function add(){
  c++;
 }
 add();
}
count();// c = 1
count();// c = 1
Copy after login

Because after creation in this way, the internal variables only exist when the count function is created and executed. After execution, the entire function will be discarded. The ability to have memory cannot be achieved. So how to achieve it? Then we will Use closures to solve it. I want to mention it again: closure = function + environment

function count(){
  var c = 0;
  function add(){
   c++;
  }
  return add;
}
var ct = count();
ct(); // c = 1
ct(); // c = 2
Copy after login

At this time, we can use this closure to complete the counting ability. ct is a closure function, and the internal environment is the local variable c. What we achieve here is the internal data, which is operated externally. In addition to the closure What other functions does this have?

Use closures to simulate private methods
This is a bit like JAVA's private methods or private variables, which can only be operated by yourself! If you operate externally, you need to set a public method to operate.

var person = (function(){
  var _name = "编程的人";
  var age = 20;
  return {
   add:function(){
     age++;
   },
   jian:function(){
     age--;
   },
   getAge:function() {
     return age;
   },
   getName:function(){
     return _name;
   },
   setName: function (name) {
     _name = name;        
   }
  }
})();
person.add();
var age = person.getAge();
console.log(age)
person.setName("编程的人公众号:bianchengderen")
console.log(person.getName())
Copy after login

It should be easy to understand here! It feels a bit like object-oriented programming. Of course, Javascript now also has the characteristics of object-oriented programming. We will explain this later.
So far, we have used examples from counting to internal privatization to illustrate closures. I hope everyone can easily understand the principle. Of course, closures have other functions that are more convenient to use.

The above is the entire content of this article. I hope it will be helpful to everyone in learning javascript programming.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template