首頁 > web前端 > js教程 > 主體

JS作用域鍊和閉包實例分享

小云云
發布: 2018-02-28 11:45:36
原創
1267 人瀏覽過

執行上下文可以理解為目前程式碼的執行環境,它會形成一個作用域。 

  - 範圍:一段< script >或函數
  - 全域:變數定義,函數宣告 (在一段< script >裡)
- 函數:變數定義,函數聲明,this,arguments

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要執行時才能確認值,定義時無法確認.

  • 作為建構子執行

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 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}
登入後複製

++作用域++

//无块级作用域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();
登入後複製

++作用域鏈+ +

一個自由變量,一直不斷地往父級作用域上找,形成的一個鍊式結構,就叫作用域鏈。

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);
    }
}
登入後複製

++閉包++

  • 函數作為傳回值

  • 函數作為參數來傳遞

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
登入後複製

相關題目

  • #對變數提升的理解

  • ##說明this幾種不同的使用場地

作為建構子執行;作為物件屬性執行;作為普通物件執行;call apply bind (具體程式碼見上部分)

- 建立10個< a >標籤,點擊的時候出來對應的序號

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

  • #理解作用域

自由變數;作用域鏈,也就是自由變數的查找;閉包的兩個場景。

  • 實際開發中閉包的應用(作用域的實際應用)

  • #
    //主要作用用于封装变量,收敛权限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的值
    登入後複製
    相關推薦:


    javascript作用於作用域鏈實例分享

    javascript中關於作用於作用域鏈的詳解

    Javascript-作用域和作用域鏈及閉包的詳解(圖文)

    以上是JS作用域鍊和閉包實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!