午夜国产狂喷潮在线观看|国产AⅤ精品一区二区久久|中文字幕AV中文字幕|国产看片高清在线

    深入理解javascript作用域和閉包
    來源:易賢網 閱讀:698 次 日期:2016-06-15 09:44:53
    溫馨提示:易賢網小編為您整理了“深入理解javascript作用域和閉包”,方便廣大網友查閱!

    作用域

    作用域是一個變量和函數的作用范圍,javascript中函數內聲明的所有變量在函數體內始終是可見的,在javascript中有全局作用域和局部作用域,但是沒有塊級作用域,局部變量的優(yōu)先級高于全局變量,通過幾個示例來了解下javascript中作用域的那些“潛規(guī)則”(這些也是在前端面試中經常問到的問題)。

    1. 變量聲明提前

    示例1:

    var scope=global;

    function scopetest(){

    console.log(scope);

    var scope=local

    }

    scopetest(); //undefined

    此處的輸出是undefined,并沒有報錯,這是因為在前面我們提到的函數內的聲明在函數體內始終可見,上面的函數等效于:

    var scope=global;

    function scopetest(){

    var scope;

    console.log(scope);

    scope=local

    }

    scopetest(); //local

    注意,如果忘記var,那么變量就被聲明為全局變量了。

    2. 沒有塊級作用域

    和其他我們常用的語言不同,在javascript中沒有塊級作用域:

    function scopetest() {

    var scope = {};

    if (scope instanceof object) {

    var j = 1;

    for (var i = 0; i < 10; i++) {

    //console.log(i);

    }

    console.log(i); //輸出10

    }

    console.log(j);//輸出1

    }

    在javascript中變量的作用范圍是函數級的,即在函數中所有的變量在整個函數中都有定義,這也帶來了一些我們稍不注意就會碰到的“潛規(guī)則”:

    >

    var scope = hello;

    function scopetest() {

    console.log(scope);//①

    var scope = no;

    console.log(scope);//②

    }

    在①處輸出的值竟然是undefined,簡直喪心病狂啊,我們已經定義了全局變量的值啊,這地方不應該為hello嗎?其實,上面的代碼等效于:

    var scope = hello;

    function scopetest() {

    var scope;

    console.log(scope);//①

    scope = no;

    console.log(scope);//②

    }

    聲明提前、全局變量優(yōu)先級低于局部變量,根據這兩條規(guī)則就不難理解為什么輸出undefined了。

    作用域鏈

    在javascript中,每個函數都有自己的執(zhí)行上下文環(huán)境,當代碼在這個環(huán)境中執(zhí)行時,會創(chuàng)建變量對象的作用域鏈,作用域鏈是一個對象列表或對象鏈,它保證了變量對象的有序訪問。

    作用域鏈的前端是當前代碼執(zhí)行環(huán)境的變量對象,常被稱之為“活躍對象”,變量的查找會從第一個鏈的對象開始,如果對象中包含變量屬性,那么就停止查找,如果沒有就會繼續(xù)向上級作用域鏈查找,直到找到全局對象中:

    作用域鏈的逐級查找,也會影響到程序的性能,變量作用域鏈越長對性能影響越大,這也是我們盡量避免使用全局變量的一個主要原因。

    閉包

    基礎概念

    作用域是理解閉包的一個前提,閉包是指在當前作用域內總是能訪問外部作用域中的變量。

    function createclosure(){

    var name = jack;

    return {

    setstr:function(){

    name = rose;

    },

    getstr:function(){

    return name + :hello;

    }

    }

    }

    var builder = new createclosure();

    builder.setstr();

    console.log(builder.getstr()); //rose:hello

    上面的示例在函數中返回了兩個閉包,這兩個閉包都維持著對外部作用域的引用,因此不管在哪調用總是能夠訪問外部函數中的變量。在一個函數內部定義的函數,會將外部函數的活躍對象添加到自己的作用域鏈中,因此上面實例中通過內部函數能夠訪問外部函數的屬性,這也是javascript模擬私有變量的一種方式。

    注意:由于閉包會額外的附帶函數的作用域(內部匿名函數攜帶外部函數的作用域),因此,閉包會比其它函數多占用些內存空間,過度的使用可能會導致內存占用的增加。

    閉包中的變量

    在使用閉包時,由于作用域鏈機制的影響,閉包只能取得內部函數的最后一個值,這引起的一個副作用就是如果內部函數在一個循環(huán)中,那么變量的值始終為最后一個值。

    //該實例不太合理,有一定延遲因素,此處主要為了說明閉包循環(huán)中存在的問題

    function timemanage() {

    for (var i = 0; i < 5; i++) {

    settimeout(function() {

    console.log(i);

    },1000)

    };

    }

    上面的程序并沒有按照我們預期的輸入1-5的數字,而是5次全部輸出了5。再來看一個示例:

    function createclosure(){

    var result = [];

    for (var i = 0; i < 5; i++) {

    result[i] = function(){

    return i;

    }

    }

    return result;

    }

    調用createclosure()[0]()返回的是5,createclosure()[4]()返回值仍然是5。通過以上兩個例子可以看出閉包在帶有循環(huán)的內部函數使用時存在的問題:因為每個函數的作用域鏈中都保存著對外部函數(timemanage、createclosure)的活躍對象,因此,他們都引用著同一變量i,當外部函數返回時,此時的i值為5,所以內部的每個函數i的值也為5。

    那么如何解決這個問題呢?我們可以通過匿名包裹器(匿名自執(zhí)行函數表達式)來強制返回預期的結果:

    9

    function timemanage() {

    for (var i = 0; i < 5; i++) {

    (function(num) {

    settimeout(function() {

    console.log(num);

    }, 1000);

    })(i);

    }

    }

    或者在閉包匿名函數中再返回一個匿名函數賦值:

    function timemanage() {

    for (var i = 0; i < 10; i++) {

    settimeout((function(e) {

    return function() {

    console.log(e);

    }

    })(i), 1000)

    }

    }

    //timemanager();輸出1,2,3,4,5

    function createclosure() {

    var result = [];

    for (var i = 0; i < 5; i++) {

    result[i] = function(num) {

    return function() {

    console.log(num);

    }

    }(i);

    }

    return result;

    }

    //createclosure()[1]()輸出1;createclosure()[2]()輸出2

    無論是匿名包裹器還是通過嵌套匿名函數的方式,原理上都是由于函數是按值傳遞,因此會將變量i的值復制給實參num,在匿名函數的內部又創(chuàng)建了一個用于返回num的匿名函數,這樣每個函數都有了一個num的副本,互不影響了。

    閉包中的this

    在閉包中使用this時要特別注意,稍微不慎可能會引起問題。通常我們理解this對象是運行時基于函數綁定的,全局函數中this對象就是window對象,而當函數作為對象中的一個方法調用時,this等于這個對象(todo 關于this做一次整理)。由于匿名函數的作用域是全局性的,因此閉包的this通常指向全局對象window:

    9

    var scope = global;

    var object = {

    scope:local,

    getscope:function(){

    return function(){

    return this.scope;

    }

    }

    }

    調用object.getscope()()返回值為global而不是我們預期的local,前面我們說過閉包中內部匿名函數會攜帶外部函數的作用域,那為什么沒有取得外部函數的this呢?每個函數在被調用時,都會自動創(chuàng)建this和arguments,內部匿名函數在查找時,搜索到活躍對象中存在我們想要的變量,因此停止向外部函數中的查找,也就永遠不可能直接訪問外部函數中的變量了??傊?,在閉包中函數作為某個對象的方法調用時,要特別注意,該方法內部匿名函數的this指向的是全局變量。

    幸運的是我們可以很簡單的解決這個問題,只需要把外部函數作用域的this存放到一個閉包能訪問的變量里面即可:

    var scope = global;

    var object = {

    scope:local,

    getscope:function(){

    var that = this;

    return function(){

    return that.scope;

    }

    }

    }

    object.getscope()()返回值為local。

    內存與性能

    由于閉包中包含與函數運行期上下文相同的作用域鏈引用,因此,會產生一定的負面作用,當函數中活躍對象和運行期上下文銷毀時,由于必要仍存在對活躍對象的引用,導致活躍對象無法銷毀,這意味著閉包比普通函數占用

    更多信息請查看腳本欄目
    易賢網手機網站地址:深入理解javascript作用域和閉包

    2025國考·省考課程試聽報名

    • 報班類型
    • 姓名
    • 手機號
    • 驗證碼
    關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
    工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
    聯系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
    咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網