A brief analysis of the understanding of closures with examples

This article shares with you a brief understanding of closures. The content is quite good. I hope it can help friends in need

Scope chain

To understand closures more clearly, you should first fully understand the scope chain, so that it will be much easier to understand closures.

The scope chain is a list that points to different variable storage spaces. It is usually surrounded by the variable environment of the window globally.

The [[scope]] attribute of each execution environment stores a reference to the scope chain.

var name = "tianci";

When we finish executing the above code, the window.name attribute in the browser is "tianci". At this time, the variable space pointed to by the scope list pointed to by window[[scope]] is There is name: "tianci"

var name = "tianci";
function sy() {
    var name = "haha";
    console.log(name);
}
sy();//haha

In this code, when executing sy(), the scope list pointed to by [[scope]] of the sy execution environment will first add the scope list of window Copy it to your own list, and insert the sy variable space into the head of the scope list (that is, the position of list.[0]). When name is executed, the name variable will be queried from the list, 0->1 -> 2 ->3... until the top-level variable environment.

var name = "tianci";
function sy() {
    var name = "haha";
    console.log(name);
    console.log(this.name);
}
sy();

//haha
//tianci

The two outputs are different

When log (name), function sy first finds name from its own environment, so it outputs haha

log (this.name) At this time, this of sy points to window (in the browser), so the query will start from the window environment to search for name, so the output is tianci

1. The scope chain is a pointer to multiple object storage spaces. List,

2. Each time the function is called, it will first copy the caller's scope chain to its own scope chain, and then insert its own scope at the head of the linked list

Closure

Closure is not difficult to understand. The concept of closure is a function that has the right to access variables in the scope of another function. The common way to create it is to create another one inside HanShu. Functions such as:

function cC(property) {
    return function (obj1,obj2) {        var value1 = obj1[property]
        var value2 = obj2[property]
        if (value1 < value2) {
            return -1;
        }else if(value1 > value2){
            return 1;
        }else if(value1 == value2){
            return 0;
        }
    }
}

Here in the anonymous function, the variable property of the calling function is accessed, which is the closure

But there is a problem with closures, that is, after cC is executed, it is anonymous If the function does not end execution, the cC environment activity object will not be destroyed. It will only be destroyed after the anonymous function is executed. Therefore, closures sometimes cause unnecessary memory leaks

Usually the this object of the anonymous function will point to the window (in the browser)

Because when the returned anonymous function is obtained, it is usually It is called directly in the global environment, so this will point to window at that time.

var name = "chentainci";
var obj ={
    name:"myboj",
    getName:function () {
        return function () {
            return this.name
        }
    }
}
console.log(obj.getName()())

The closure only obtains the final value of the variable

function fun() {
    var result =new Array();
    for (var i  = 0;i  < 10; i++) {
        result[i] = function () {
            return i
        }
    }
    return result;
}

result stores a function whose return value is the final value of i 10

Related recommendations:

ClosureWhat is closure

##In-depth understanding of js closure

Common applications of closures

The above is the detailed content of A brief analysis of the understanding of closures with examples. For more information, please follow other related articles on the PHP Chinese website!