Chaîne de portée JS et partage d'exemples de fermeture

Le contexte d'exécution peut être compris comme l'environnement d'exécution du code actuel, qui formera une portée.

- Portée : un paragraphe 5b8b77bb7a3607db25abf34210579d17 - Global : définition de variable, déclaration de fonction (dans un 8dc508343c0e30b65323392868b1f3eb)
- Fonction : définition de variable, déclaration de fonction, this, arguments

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

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

Dans ce code, var a et fonction fn() sont désormais extraites et placées avant le code d'exécution

++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;

La valeur de this ne peut être confirmée que lors de l'exécution et ne peut pas être confirmée une fois définie.

• Exécuté en tant que constructeur

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

• Exécuté en tant que propriété d'objet

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

• Exécuté en tant que fonction normale

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

• appel appliquer liaison

//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++

Une variable libre est constamment recherchée dans la portée parent, formant une structure de chaîne appelée chaîne de portée.

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++

• Fonction comme valeur de retour

• Passer fonctionne comme paramètres

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

Questions connexes

• Compréhension de la promotion variable

• Expliquez plusieurs utilisations différentes de ceci

Exécuté en tant que constructeur ; exécuté en tant qu'attribut d'objet ; exécuté en tant qu'objet ordinaire ; call apply bind (voir la section ci-dessus pour le code spécifique)

- Créez 10 balises < et lorsque vous cliquez dessus, le numéro de série correspondant apparaîtra

//考察作用域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)//自执行函数，就是不用调用，只要定义完成就能立即执行的函数

• Comprendre la portée

Variables libres ; chaîne de portée, c'est-à-dire la recherche de variables libres pour deux scénarios de fermeture ;

• Application des fermetures en développement réel (application pratique du champ d'application)

//主要作用用于封装变量，收敛权限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的值

Recommandations associées :

Partage d'exemples de javascript agissant sur les chaînes de portée

Explication détaillée de javascript agissant sur les chaînes de portée

Javascript - Explication détaillée de la portée , chaîne de portée et fermeture (photo et texte)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!