JS scope chain and closure example sharing

The execution context can be understood as the execution environment of the current code, which will form a scope.

- Scope: a section of < script > or a function
- Global: variable definition, function declaration (in a < script >)
- Function: variable definition, function declaration, this, arguments

console.log(a);var a = a;

fn('dong');function(){}

In this code, var a and function fn() are now put out before executing the code

++ this++

var a = {    name:'A',    fn:function(){        console.log(this.name)
    }
}

a.fn();//this === A
a.fn.call({name:'B'})//this === {name :'B'}var fn1 = a.fn;
fn1(); //this==windowfn1;

The value of this can only be confirmed during execution and cannot be confirmed when defined.

• Executed as a constructor

function Foo(name){
    this.name = name;
}var f = new ('dong');

• Executed as an object attribute

var obj = {
    name :'a',
    printName:function(){
        console.log(this.name);
    }
}
obj.printName(); //a

• Executed as a normal function

function fn(){
    console.log(this);//this===window}

• call apply bind

//callfunction fn1(name，age){
    alert(name,age);
    console.log(this);
}
fn1.call({x:100},'dong',200);//弹出dong 200//打印{x:100}//call将this指向第一个参数的值//常用它来改变函数的this值//apply与call类似//bindfunction fn1(name,age){
    alert(name);
    console.log(this);
}
fn.call({x:100},'dong',20);//this为{x:100}var fn2 =function (name,age){
    alert(name);
    console.log(this);
}.bind({y:200});//必须用函数表达式的方式fn2.call('dong',20); //this为{y:200}

++scope++

//无块级作用域if(true){
var name = 'dong';
}
console.log(name);//函数和全局作用域var a =100;
function fn(){
    var a =200;
    console.log('fn',a);
}
console.log('global',a);fn();

++scope chain+ +

A free variable is constantly searched for in the parent scope, forming a chain structure called a scope chain.

var a = 100;function(){
    var b = 200;
    console.log(a);//当前作用域中没有定义a,a就是自由变量
    console.log(b);
}

var a = 100;function F1(){
    var b =200;    function F2(){
        var c = 300;
        console.log(a);
        console.log(b);
        console.log(c);
    }
}

++Closure++

• Function as return value

• Function as parameter To pass

function F1(){
    var a = 100;    return function(){
        console.log(a);
    }
}var f1 = F1();//表示变量f1是一个函数var a = 200;
f1(); //100//全局里的a与在F1作用域里的a是没有关系的，一个函数的父级作用域是它定义时候的作用域而不是它执行的作用域，所以a这个自由变量直接在它的父级作用域中直接找到。

function F1(){
    var a = 100;    return function(){
        console.log(a);
    }
}var f1 = F1();function F2(fn){
    var a = 200;
    fn();
}
F2(f1);//100

Related questions

• Understanding of variable promotion

• Explain several types of this Different usage scenarios

Executed as a constructor; executed as an object attribute; executed as a normal object; call apply bind (see the above part for specific code)
- Create 10 < a > label, when clicked, the corresponding serial number will appear

//考察作用域var i,a;for(var i = 0;i<10;i++){
    a = document.creatElement(&#39;a&#39;);
    a.innerHTML = i +<br/>;
    a.addEventListener(&#39;click&#39;,function(e){
        e.preventDefault();
        alert(i); //自由变量需要从父级作用域获取值
    })
    document.body.appendChild(a);
}//这时候监听事件里的函数的自由变量，已经变为10了，所以，不管点击哪个它的序号都是10

//正确方法var i;for (i = 0;i < 10;i++){
    (function(i){
        var a = document.creatElement(&#39;a&#39;);
        a.addEventListener(&#39;click&#39;,function(e){
            e.preventDefault();
            alert(i);  
        })
        document.body.appendChild(a);
    })(i);//自调用函数立即执行}//(function(i){})(i)//自执行函数，就是不用调用，只要定义完成就能立即执行的函数

• Understanding the scope

Free variables; scope chain, that is, free variables Search; two scenarios of closure.

• Application of closures in actual development (practical application of scope)

//主要作用用于封装变量，收敛权限funciton isFirstLoad(){    var _list = [];    return function(id){
        if(_list.indexOf(id) >= 0){            return false;
        }else{
            _list.push(id);            return true;
        }
    }
}//使用var firstLoad = idFirstLoad();
firstLoad(10); //truefirstLoad(10); //falsefirstLoad(20); //true//在isFirstLoad函数外面，根本不可能修改掉__ list的值

Related recommendations:

Sharing examples of javascript acting on scope chains

Detailed explanation of javascript acting on scope chains

Javascript-Scope And detailed explanation of scope chain and closure (picture and text)

The above is the detailed content of JS scope chain and closure example sharing. For more information, please follow other related articles on the PHP Chinese website!