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

Beispielfreigabe für JS-Bereichskette und -Abschluss

Feb 28, 2018 am 11:45 AM
javascript 作用域 实例

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!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Verwendung der Typedef-Struktur in der C-Sprache Verwendung der Typedef-Struktur in der C-Sprache May 09, 2024 am 10:15 AM

typedef struct wird in der C-Sprache zum Erstellen von Strukturtypaliasen verwendet, um die Verwendung von Strukturen zu vereinfachen. Es weist einem neuen Datentyp ein Alias ​​auf eine vorhandene Struktur zu, indem es den Strukturalias angibt. Zu den Vorteilen gehören verbesserte Lesbarkeit, Wiederverwendung von Code und Typprüfung. Hinweis: Die Struktur muss vor der Verwendung eines Alias ​​definiert werden. Der Alias ​​muss im Programm eindeutig sein und nur innerhalb des Bereichs gültig sein, in dem er deklariert ist.

So lösen Sie die in Java erwartete Variable So lösen Sie die in Java erwartete Variable May 07, 2024 am 02:48 AM

Variablenerwartungsausnahmen in Java können gelöst werden durch: Initialisierung von Variablen; Verwendung von Nullwerten; Verwendung von Überprüfungen und Zuweisungen;

Vor- und Nachteile von Verschlüssen in js Vor- und Nachteile von Verschlüssen in js May 10, 2024 am 04:39 AM

Zu den Vorteilen von JavaScript-Abschlüssen gehören die Aufrechterhaltung des variablen Bereichs, die Aktivierung von modularem Code, die verzögerte Ausführung und die Ereignisbehandlung. Zu den Nachteilen zählen Speicherverluste, erhöhte Komplexität, Leistungsaufwand und Auswirkungen der Bereichskette.

Was bedeutet include in c++? Was bedeutet include in c++? May 09, 2024 am 01:45 AM

Die Präprozessoranweisung #include in C++ fügt den Inhalt einer externen Quelldatei in die aktuelle Quelldatei ein und kopiert ihren Inhalt an die entsprechende Stelle in der aktuellen Quelldatei. Wird hauptsächlich zum Einschließen von Header-Dateien verwendet, die im Code benötigte Deklarationen enthalten, z. B. #include <iostream>, um Standard-Eingabe-/Ausgabefunktionen einzubinden.

C++-Smartpointer: eine umfassende Analyse ihres Lebenszyklus C++-Smartpointer: eine umfassende Analyse ihres Lebenszyklus May 09, 2024 am 11:06 AM

Lebenszyklus von C++-Smartpointern: Erstellung: Smartpointer werden erstellt, wenn Speicher zugewiesen wird. Eigentumsübertragung: Übertragen Sie das Eigentum durch einen Umzugsvorgang. Freigabe: Speicher wird freigegeben, wenn ein Smart Pointer den Gültigkeitsbereich verlässt oder explizit freigegeben wird. Objektzerstörung: Wenn das Objekt, auf das gezeigt wird, zerstört wird, wird der intelligente Zeiger zu einem ungültigen Zeiger.

Können die Definition und der Aufruf von Funktionen in C++ verschachtelt werden? Können die Definition und der Aufruf von Funktionen in C++ verschachtelt werden? May 06, 2024 pm 06:36 PM

Dürfen. C++ erlaubt verschachtelte Funktionsdefinitionen und Aufrufe. Externe Funktionen können integrierte Funktionen definieren und interne Funktionen können direkt innerhalb des Bereichs aufgerufen werden. Verschachtelte Funktionen verbessern die Kapselung, Wiederverwendbarkeit und Bereichskontrolle. Interne Funktionen können jedoch nicht direkt auf lokale Variablen externer Funktionen zugreifen, und der Rückgabewerttyp muss mit der Deklaration der externen Funktion übereinstimmen. Interne Funktionen können nicht selbstrekursiv sein.

Es gibt mehrere Situationen, auf die dies in js hinweist Es gibt mehrere Situationen, auf die dies in js hinweist May 06, 2024 pm 02:03 PM

Zu den Zeigertypen gehören in JavaScript: 1. Globales Objekt; 3. Konstruktoraufruf; 5. Pfeilfunktion (erbt dies); Darüber hinaus können Sie mit den Methoden bind(), call() und apply() explizit festlegen, worauf dies hinweist.

Der Unterschied zwischen let und var in vue Der Unterschied zwischen let und var in vue May 08, 2024 pm 04:21 PM

In Vue gibt es beim Deklarieren von Variablen zwischen let und var einen Unterschied im Gültigkeitsbereich: Gültigkeitsbereich: var hat einen globalen Gültigkeitsbereich und let hat einen Gültigkeitsbereich auf Blockebene. Bereich auf Blockebene: var erstellt keinen Bereich auf Blockebene, let erstellt einen Bereich auf Blockebene. Neudeklaration: var ermöglicht die Neudeklaration von Variablen im gleichen Bereich, let jedoch nicht.

See all articles