Home > Web Front-end > JS Tutorial > JS scope chain and closure example sharing

JS scope chain and closure example sharing

小云云
Release: 2018-02-28 11:45:36
Original
1342 people have browsed it

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(&#39;dong&#39;);function(){}
Copy after login

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

++ this++

var a = {    name:&#39;A&#39;,    fn:function(){        console.log(this.name)
    }
}

a.fn();//this === A
a.fn.call({name:&#39;B&#39;})//this === {name :&#39;B&#39;}var fn1 = a.fn;
fn1(); //this==windowfn1;
Copy after login

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 (&#39;dong&#39;);
Copy after login
  • Executed as an object attribute

var obj = {
    name :&#39;a&#39;,
    printName:function(){
        console.log(this.name);
    }
}
obj.printName(); //a
Copy after login
  • Executed as a normal function

function fn(){
    console.log(this);//this===window}
Copy after login
  • call apply bind

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

++scope++

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

++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);
}
Copy after login
var a = 100;function F1(){
    var b =200;    function F2(){
        var c = 300;
        console.log(a);
        console.log(b);
        console.log(c);
    }
}
Copy after login

++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这个自由变量直接在它的父级作用域中直接找到。
Copy after login
function F1(){
    var a = 100;    return function(){
        console.log(a);
    }
}var f1 = F1();function F2(fn){
    var a = 200;
    fn();
}
F2(f1);//100
Copy after login

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
Copy after login
//正确方法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)//自执行函数,就是不用调用,只要定义完成就能立即执行的函数
Copy after login
  • 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的值
Copy after login

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!

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