你們真的了解閉包嗎？

bigdevil_s 發布于2019-08-23 10:56 / 503人閱讀

摘要：前言我們知道所謂的閉包指的就是有權訪問另一個函數作用域的變量對象的函數，但是你們真的了解的閉包嗎就當你們很了解了，畢竟是基礎知識，我就簡單說說概念簡單幾行代碼，先說說作用域鏈的流程，運行到時，會將作用域鏈保存到中執行到時會創建執行環境，并將

前言

我們知道所謂的閉包指的就是有權訪問另一個函數作用域的變量對象的函數，但是你們真的了解JS的閉包嗎？就當你們很了解了，畢竟是基礎知識，我就簡單說說

概念

var a = "july";
function test () {
    var b = "mirok";
    return function() {
        var c = "inner"
        console.log(a);
        console.log(b);
    }
}
test()(); // mirok,july
console.log(c); // error: undefined

簡單幾行代碼，先說說作用域鏈的流程，運行到test()時，會將作用域鏈保存到[[Scope]]中,執行到test()時會創建執行環境，并將復制[[Scope]]對象構建執行函數的作用域鏈。我們知道作用域鏈尋找規則是往前找的，而閉包是能夠將外部函數的活動對象添加到作用域鏈中的，所以test函數里的閉包就包含了全局的活動對象和test的活動對象，自然就能輸出a和b

注意

閉包需要注意的點是它只取外部函數變量最后一個值，例如以下demo:

 function test (){
    var arr = [];
    for (var i=0; i<3; i++) {
        arr[i] = function() {
            return i;
        }
    }
    return arr;
}
for (var i =0; i < test().length; i++) {
    console.log(test()[i]())
}
// 輸出三個3

也就是說閉包里作用鏈中的外部函數的活動對象一直都是i，因為作用域鏈其實是指向活動對象的指針列表，所以當test返回時i是3，閉包里的也自然是都是3

this指向問題

我們知道this指向函數的執行環境，全局中調用指向window，對象調用指向該對象，但是在對象中函數的閉包的this又指向哪呢？先上代碼

var env = "window";
const obj = {
    env: "Obj",
    showEnv: function() {
        return function() {
            console.log(this.env)// 輸出window
        }
    }
}

輸出window因為本身的this在閉包中就已經存在，因此不會去尋找Obj的this，再不通過call和apply調用的情況下，匿名函數的this指向window的

其實閉包就是這樣一塊東西

function test() {
    var a = "mirok";
    function show () {
        var b = "july";
        console.log(this);
        return a;
    };
    this.fun = show;
}
const obj = new test();
obj.fun(); // mirok

看看Scopes就知道閉包是什么啦~很容易就能理解的

GPU云服務器云服務器廣告聯盟是真的嗎 linux系統真的安全嗎中國物聯網是真的嗎 uu492是真的嗎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96838.html

你們真的了解JS的事件嗎？

摘要：基礎最后一篇啦，蹭著周六日趕緊寫完，其他的都是的或者瀏覽器能力，高級技巧，使用等雜七雜八的知識點，這里就不一一介紹了，平時編碼也用不太到，有興趣的可以找找相關的書籍前言先說說事件流吧，事件流就是從從開始到目標節點之前的節點進行事件的捕獲，在基礎最后一篇啦，蹭著周六日趕緊寫完，其他的都是DOM,BOM的api或者瀏覽器能力，高級技巧，Canvas使用等雜七雜八的知識點，這里就不一一介紹...

douzifly 2019-08-23 10:57 評論0 收藏0
面試小結--前端面試的幾個雷點

摘要：前言得益于金三銀四，在最近一段時間，面試了一些人，但是符合的寥寥無幾。看到我的面試題自己寫的面試題，自己想的答案。聽人說過一個面試套路面試官問的問題，可能面試官自己都不懂，目的只是為了壓工資，挫士氣。不過我是為了測試面試者是不是真的精通。技術在不斷的創新，隨著框架，庫，構建工具，打包工具，版本控制工具等操作越來越方便，使用越來越簡單。面對這樣的情況，除了興奮，也要警惕。這些工具使得開...

idealcn 2019-08-22 16:07 評論0 收藏0
嗨，你真的懂this嗎？

摘要：任何一個函數都可以使用來調用，因此其實并不存在構造函數，而只有對于函數的構造調用。不可以當作構造函數，也就是說，不可以使用命令，否則會拋出一個錯誤。 this關鍵字是JavaScript中最復雜的機制之一，是一個特別的關鍵字，被自動定義在所有函數的作用域中，但是相信很多JsvaScript開發者并不是非常清楚它究竟指向的是什么。聽說你很懂this,是真的嗎？請先回答第一個問題：如何準...

morgan 2019-08-23 16:18 評論0 收藏0
你們真的了解JS的繼承嘛？

摘要：這又是什么呢這個相對之前的比較復雜，但是高效的一點是只調用一次被繼承者構造函數原理就是通過寄生方式創建一個被繼承者的副本，副本和被繼承者共用一個這樣就解決了之前的問題返回的一個副本設置指向因為新副本的原型對象被重寫副本作為的原型對象前言我們學JAVA的時候說到繼承就是一個extends ClassName的事情，但是在JS的世界里繼承和我們在JAVA所認識的繼承實現方法又有一些不同...

ssshooter 2019-08-23 10:51 評論0 收藏0
Know this, use this! (總結 this 的常見用法)

摘要：而當做普通函數調用的話，實際上即第種情況下，對函數普通調用，此時的指向這是正常情況下，會正確返回并且指向該對象，但是在構造函數當中，如果返回了一個對象，那么會指向返回的那個對象。 this應該是一個討論了很久的話題了。其中，關于this的文章，在很多的博客當中也有很多介紹，但是，以前我都是一知半解的去了解它，就是看博客當中，只介紹了一些情況下的 this 的使用方式，但是也并沒有自己去...

zorro 2019-08-21 14:21 評論0 收藏0