ホームページ > ウェブフロントエンド > jsチュートリアル > JS スコープ チェーンとクロージャの例の共有

JS スコープ チェーンとクロージャの例の共有

小云云
リリース: 2018-02-28 11:45:36
オリジナル
1327 人が閲覧しました

実行コンテキストは、スコープを形成する現在のコードの実行環境として理解できます。

- スコープ: 段落 < 関数
- グローバル: 変数定義、関数宣言 (< スクリプト > 内)
- 関数: 変数定義、関数宣言、this、引数

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

fn(&#39;dong&#39;);function(){}
ログイン後にコピー

このコードでは、var a と関数 fn() が実行コードの前に置かれるようになりました

++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;
ログイン後にコピー

this は実行中に実行されます To値を確認します。定義時は確認できません

  • コンストラクタとして実行

function Foo(name){
    this.name = name;
}var f = new (&#39;dong&#39;);
ログイン後にコピー
  • オブジェクト属性として実行

var obj = {
    name :&#39;a&#39;,
    printName:function(){
        console.log(this.name);
    }
}
obj.printName(); //a
ログイン後にコピー
  • 通常の関数として実行

function fn(){
    console.log(this);//this===window}
ログイン後にコピー
  • call apply binding

//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}
ログイン後にコピー

++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();
ログイン後にコピー

++Scopechain++

自由変数は親スコープ内でそれを探し続け、スコープチェーンと呼ばれるチェーン構造を形成します。

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 F1(){
    var a = 100;    return function(){
        console.log(a);
    }
}var f1 = F1();//表示变量f1是一个函数var a = 200;
f1(); //100//全局里的a与在F1作用域里的a是没有关系的,一个函数的父级作用域是它定义时候的作用域而不是它执行的作用域,所以a这个自由变量直接在它的父级作用域中直接找到。
ログイン後にコピー
rree

関連する質問

  • 変数プロモーションの理解

  • これを説明する いくつかの異なる使用シナリオ

コンストラクターとして実行され、オブジェクト属性として実行され、通常のオブジェクトとして実行されます (具体的なコードについては上記の部分を参照してください)

- クリックすると < タグが作成されます。対応するシーケンス番号

function F1(){
    var a = 100;    return function(){
        console.log(a);
    }
}var f1 = F1();function F2(fn){
    var a = 200;
    fn();
}
F2(f1);//100
ログイン後にコピー
//考察作用域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
ログイン後にコピー

  • スコープ

  • スコープチェーン、つまりクロージャーの2つのシナリオを理解します。

    実際の開発におけるクロージャの適用(スコープの実践的な適用)
  • //正确方法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)//自执行函数,就是不用调用,只要定义完成就能立即执行的函数
    ログイン後にコピー
    関連する推奨事項:


    スコープチェーンで動作するJavaScriptの例の共有

    JavaScriptでのスコープチェーンの動作について

    の詳細な説明

    JavaScript - スコープ、スコープチェーン、クロージャの詳しい説明(画像とテキスト)

    以上がJS スコープ チェーンとクロージャの例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート