Heim > Web-Frontend > js-Tutorial > Beispielfreigabe für JS-Bereichskette und -Abschluss

Beispielfreigabe für JS-Bereichskette und -Abschluss

小云云
Freigeben: 2018-02-28 11:45:36
Original
1327 Leute haben es durchsucht

Der Ausführungskontext kann als die Ausführungsumgebung des aktuellen Codes verstanden werden, der einen Bereich bildet.

– Geltungsbereich: ein Absatz < Skript > - Global: Variablendefinition, Funktionsdeklaration (in einem < Skript >)
- Funktion: Variablendefinition, Funktionsdeklaration, this, Argumente

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

fn(&#39;dong&#39;);function(){}
Nach dem Login kopieren
In diesem Code werden nun var a und Funktion fn() extrahiert und vor dem Ausführungscode platziert

++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;
Nach dem Login kopieren
Der Wert von this kann nur während der Ausführung bestätigt werden und kann nicht bestätigt werden, wenn er definiert ist.

  • Ausgeführt als Konstruktor

function Foo(name){
    this.name = name;
}var f = new (&#39;dong&#39;);
Nach dem Login kopieren
  • Ausgeführt als Objekteigenschaft

var obj = {
    name :&#39;a&#39;,
    printName:function(){
        console.log(this.name);
    }
}
obj.printName(); //a
Nach dem Login kopieren
  • Ausgeführt als normale Funktion

function fn(){
    console.log(this);//this===window}
Nach dem Login kopieren
  • 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}
Nach dem Login kopieren

++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();
Nach dem Login kopieren

++Scope-Kette++

Eine freie Variable wird ständig im übergeordneten Bereich gesucht und bildet eine Kettenstruktur, die als Bereichskette bezeichnet wird.

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

++Closure++

  • Funktion als Rückgabewert

  • Passing Funktionen als Parameter

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

  • Verständnis der variablen Förderung

  • Erklären Sie verschiedene Verwendungsmöglichkeiten davon

Ausgeführt als Objektattribut; ausgeführt als gewöhnliches Objekt >- Erstellen Sie 10 < a >-Tags. Wenn Sie darauf klicken, wird die entsprechende Seriennummer angezeigt >

Freie Variablen; Bereichskette, d. h. die Suche nach freien Variablen;

//考察作用域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
Nach dem Login kopieren
//正确方法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)//自执行函数,就是不用调用,只要定义完成就能立即执行的函数
Nach dem Login kopieren
Anwendung von Abschlüssen in der tatsächlichen Entwicklung (praktische Anwendung des Umfangs)
  • Verwandte Empfehlungen:

    Teilen von Beispielen für die Wirkung von Javascript auf Bereichsketten
  • Detaillierte Erläuterung der Wirkung von Javascript auf Bereichsketten
//主要作用用于封装变量,收敛权限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的值
Nach dem Login kopieren


Javascript – Detaillierte Erläuterung des Bereichs , Zielfernrohrkette und Verschluss (Bild und Text)

Das obige ist der detaillierte Inhalt vonBeispielfreigabe für JS-Bereichskette und -Abschluss. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage