Detailed introduction to in-depth analysis of Javascript closures and code implementation methods

1. What is a closure # Closure, the official explanation of closure is: an expression that has many variables

and the environment bound to these variables (usually a

function ), so these variables are also part of the expression. Characteristics of closure: 1. As a

reference

of a function variable, when the function returns, it is in the activated state. 2. A closure is a stack area that does not release resources when a function returns. Simply put, Javascript allows the use of
internal functions—that is, function definitions and function expressions are located within the function body of another function. Furthermore, these inner functions have access to all local variables, parameters, and other inner functions declared in the outer function in which they exist. A closure is formed when one of these inner functions is called outside the outer function that contains them.

2. Several ways to write and use closuresFirst of all, you must understand that everything in JS is an object

, function is a type of object. Let's first look at the five ways to write closures and briefly understand what closures are. This will be explained in detail later.

//第1种写法  
function Circle(r) {  
      this.r = r;  
}  
Circle.PI = 3.14159;  
Circle.prototype.area = function() {  
  return Circle.PI * this.r * this.r;  
}  

var c = new Circle(1.0);     
alert(c.area());

There is nothing special about this way of writing, it just adds some attributes

to the function.

//第2种写法  
var Circle = function() {  
   var obj = new Object();  
   obj.PI = 3.14159;  

   obj.area = function( r ) {  
       return this.PI * r * r;  
   }  
   return obj;  
}  

var c = new Circle();  
alert( c.area( 1.0 ) );

This way of writing is to declare a variable and assign a function as a value to the variable.

//第3种写法  
var Circle = new Object();  
Circle.PI = 3.14159;  
Circle.Area = function( r ) {  
       return this.PI * r * r;  
}  

alert( Circle.Area( 1.0 ) );

The best way to understand this method is to create a new object, and then add properties and methods

to the object.

//第4种写法  
var Circle={  
   "PI":3.14159,  
 "area":function(r){  
          return this.PI * r * r;  
        }  
};  
alert( Circle.area(1.0) );

This method is commonly used and is the most convenient. var obj = {} declares an empty object.

//第5种写法  
var Circle = new Function("this.PI = 3.14159;this.area = function( r ) {return r*r*this.PI;}");  

alert( (new Circle()).area(1.0) );

To be honest, I have never used this writing method, you can refer to it.

In general, among the above methods, the 2nd and 4th are more common, and you can choose according to your habits.

The prototype commonly used in JS appears in the above code, so what is the use of prototype? Let's take a look below:

var dom = function(){

    };

    dom.Show = function(){
        alert("Show Message");
    };

    dom.prototype.Display = function(){
        alert("Property Message");
    };

    dom.Display(); //error
    dom.Show();  
    var d = new dom();
    d.Display();
    d.Show(); //error

We first declare a variable and assign a function to it, because in Javascript every function has a Portotype attribute, but the object does not. Add two methods, add them directly and add them to break the prototype to see the calling situation. The analysis results are as follows:

1. Object methods that are not defined using the prototype attribute are

static

methods and can only be called directly using the class name! In addition, this variable cannot be used in this static method to call other properties of the object!

2. Object methods defined using the prototype attribute are non-static methods and can only be used after instantiation! Within its method, this can be used to refer to other properties in the object itself!

Let’s take a look at a piece of code:

var dom = function(){
        var Name = "Default";
        this.Sex = "Boy";
        this.success = function(){
            alert("Success");
        };
    };

    alert(dom.Name);
    alert(dom.Sex);

Let’s take a look first, what will be displayed? The answer is that both show Undefined, why? This is because each function in Javascript forms a scope, and these variables are declared in the function, so they are in the scope of this function and cannot be accessed from the outside. To access a variable, you must create a new instance.

var html = {
        Name:'Object',
        Success:function(){
            this.Say = function(){
                    alert("Hello,world");
            };
            alert("Obj Success");
        }
    };

Let’s take a look at this way of writing. In fact, this is a “syntactic sugar” for Javascript. This way of writing is equivalent to:

var html = new Object();
    html.Name = 'Object';
    html.Success = function(){
            this.Say = function(){
                    alert("Hello,world");
            };
            alert("Obj Success");

The variable html is an object, not a function, so there is no Prototype Attributes and their methods are also public methods, and html cannot be instantiated. Otherwise, the following error will occur:

But it can be assigned as a value to

other

variables, such as var o = html; We can use it like this:

    alert(html.Name);
    html.Success();

Speaking of which, are you done? Careful people will ask, how to access the Say method in the Success method? Is it html.Success.Say()?

Of course not. As mentioned above, it is inaccessible due to scope restrictions. So use the following method to access:

var s = new html.Success();
s.Say();

//还可以写到外面
html.Success.prototype.Show = function(){
    alert("HaHa");
};
var s = new html.Success();
s.Show();

Regarding the issue of Javascript scope, it cannot be explained clearly in one or two sentences. If you are interested, you can find some information online.

二、Javascript闭包的用途                                                                  

事实上，通过使用闭包，我们可以做很多事情。比如模拟面向对象的代码风格；更优雅，更简洁的表达出代码；在某些方面提升代码的执行效率。

1、匿名自执行函数

我们知道所有的变量，如果不加上var关键字，则默认的会添加到全局对象的属性上去，这样的临时变量加入全局对象有很多坏处，
比如：别的函数可能误用这些变量；造成全局对象过于庞大，影响访问速度(因为变量的取值是需要从原型链上遍历的)。
除了每次使用变量都是用var关键字外，我们在实际情况下经常遇到这样一种情况，即有的函数只需要执行一次，其内部变量无需维护，
比如UI的初始化，那么我们可以使用闭包：

var data= {    
    table : [],    
    tree : {}    
};    

(function(dm){    
    for(var i = 0; i < dm.table.rows; i++){    
       var row = dm.table.rows[i];    
       for(var j = 0; j < row.cells; i++){    
           drawCell(i, j);    
       }    
    }    

})(data);

我们创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在函数执行完后会立刻释放资源，关键是不污染全局对象。

2、结果缓存

我们开发中会碰到很多情况，设想我们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间，

那么我们就需要将计算出来的值存储起来，当调用这个函数的时候，首先在缓存中查找，如果找不到，则进行计算，然后更新缓存并返回值，如果找到了，直接返回查找到的值即可。闭包正是可以做到这一点，因为它不会释放外部的引用，从而函数内部的值可以得以保留。

var CachedSearchBox = (function(){    
    var cache = {},    
       count = [];    
    return {    
       attachSearchBox : function(dsid){    
           if(dsid in cache){//如果结果在缓存中    
              return cache[dsid];//直接返回缓存中的对象    
           }    
           var fsb = new uikit.webctrl.SearchBox(dsid);//新建    
           cache[dsid] = fsb;//更新缓存    
           if(count.length > 100){//保正缓存的大小<=100    
              delete cache[count.shift()];    
           }    
           return fsb;          
       },    

       clearSearchBox : function(dsid){    
           if(dsid in cache){    
              cache[dsid].clearSelection();      
           }    
       }    
    };    
})();    

CachedSearchBox.attachSearchBox("input");

这样我们在第二次调用的时候，就会从缓存中读取到该对象。

3、封装

var person = function(){    
    //变量作用域为函数内部，外部无法访问    
    var name = "default";       

    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
}();    

print(person.name);//直接访问，结果为undefined    
print(person.getName());    
person.setName("abruzzi");    
print(person.getName());    

得到结果如下：  

undefined  
default  
abruzzi

4、实现类和继承

function Person(){    
    var name = "default";       

    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
    };   

    var p = new Person();
    p.setName("Tom");
    alert(p.getName());
    var Jack = function(){};
    //继承自Person
    Jack.prototype = new Person();
    //添加私有方法
    Jack.prototype.Say = function(){
        alert("Hello,my name is Jack");
    };
    var j = new Jack();
    j.setName("Jack");
    j.Say();
    alert(j.getName());

我们定义了Person，它就像一个类，我们new一个Person对象，访问它的方法。

下面我们定义了Jack，继承Person，并添加自己的方法。

The above is the detailed content of Detailed introduction to in-depth analysis of Javascript closures and code implementation methods. For more information, please follow other related articles on the PHP Chinese website!