Javascript重溫OOP之作用域與閉包

JessYanCoding 發布于2019-08-21 10:56 / 1317人閱讀

摘要：的變量作用域是基于其特有的作用域鏈的。需要注意的是，用創建的函數，其作用域指向全局作用域。所以，有另一種說法認為閉包是由函數和與其相關的引用環境組合而成的實體。

作用域 定義

在編程語言中，作用域控制著變量與參數的可見性及生命周期，它能減少名稱沖突，而且提供了自動內存管理 --javascript 語言精粹

我理解的是，一個變量、函數或者成員可以在代碼中訪問到的范圍。

js的變量作用域是基于其特有的作用域鏈的。

全局變量都是window對象的屬性

沒有塊級作用域

函數中聲明的變量在整個函數中都有定義。

//全局作用域
var a = 10;

//沒有塊級作用域
if(fasle){
    var b =2;
}

//函數作用域
function f(){
    var a = 1;
    console.log(a);
}

作用域鏈

作用域鏈是一個對象列表，上下文代碼中出現的標識符在這個列表中進行查找。

如果一個變量在函數自身的作用域（在自身的變量/活動對象）中沒有找到，那么將會查找它父函數（外層函數）的變量對象，以此類推。

舉個栗子：

function f (){
    var x =100;
    function g(){
        console.log(x);
    }
    g();
}
f();

這里形成了一條作用域鏈，當函數g訪問不到變量時，它會通過內部的[[scope]]對象查找作用域鏈上的執行上下文，當找到就終止，找不到會繼續，直到window對象上也沒有的時候，會報錯。

需要注意的是，用new Function創建的函數，其作用域指向全局作用域。

function f(){
    var x = 100;
    // g.[[scope]] == window
    var g = new Function("", "alert(x)");

    g();
}
f();
//報錯 x is not defined

閉包 閉包的含義

在計算機科學中，閉包（英語：Closure），又稱詞法閉包（Lexical Closure）或函數閉包（function closures），是引用了自由變量的函數。這個被引用的自由變量將和這個函數一同存在，即使已經離開了創造它的環境也不例外。所以，有另一種說法認為閉包是由函數和與其相關的引用環境組合而成的實體。--維基百科

我的理解就是，一個函數捕獲其父函數的自由變量，這就形成了閉包。

栗子：

function f1(){
    var a = 10;
    var b = 20;
    return function f2(){
        console.log(a);
    }
}
var result = f1();
result();

閉包的本質

作用域鏈的存在

閉包的好處

減少全局變量

減少傳遞給函數的參數數量

封裝

使用閉包的注意點

對捕獲的變量只是個引用，不是復制

function f(){
    var num = 1;
    function g(){
        alert(num);
    }

    num++;
    g(); //2
}
f();

父函數每調用一次，會產生不同的閉包

function f(){
    var num = 1;
    return function(){
        num++;
        alert(num);
    }
}
var result1 =f();
result1();
result1();
var result2 =f();
result2();
result2();
//兩次都彈出一樣的數值

循環中出現的問題

for (var i = 1; i <= 3; i++) {
    var ele = document.getElementById(i);
    ele.onclick = function(){
        alert(i);
    }
};
// i為4

解決方法：

for (var i = 1; i <= 3; i++) {
var ele = document.getElementById(i);
    ele.onclick = (function(id){
        return function(){
        alert(id);
    }})(i);
};
// 1，2，3

GPU云服務器云服務器 javascript閉包 javascript閉包詳解 javascript作用 javascript的作用

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

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

JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
Javascript重溫OOP之面向對象

摘要：類的繼承建立繼承關系修改的指向調用父類方法調用父類的構造器調用父類上的方法封裝命名空間是沒有命名空間的，因此可以用對象模擬。參考資料面向對象面向對象程序設計（Object-oriented programming，OOP）是一種程序設計范型，同時也是一種程序開發的方法。對象指的是類的實例。它將對象作為程序的基本單元，將程序和數據封裝其中，以提高軟件的重用性、靈活性和擴展性。——維基百...

AbnerMing 2019-08-22 10:33 評論0 收藏0
小菊花課堂之JavaScript作用域與閉包

摘要：而閉包卻能阻止這件事情發生。由于的聲明位置使它擁有涵蓋內部作用域的閉包，使得該作用域能夠一直存在，以供在之后進行引用。到這里，小菊花課堂之閉包的內容就告一段落啦，感謝各位能耐心看到這里。由于前段時間項目沒有那么忙，然后我這人一天不看點啥就非常焦慮，于是二刷《你不知道的JavaScript》，現在讀到閉包，想著看完這一章節，寫點東西也是挺好的，所以有了下面的內容，如有不對的地方，敬請斧...

lunaticf 2019-08-23 12:36 評論0 收藏0
Javascript重溫OOP之原型與原型鏈

摘要：在構造函數中的中定義的屬性和方法，會被創建的對象所繼承下來。從上面的輸出結果看出，指向了其構造函數的，而本身也是一個對象，其內部也有屬性，其指向的是直到最后指向，這條原型鏈才結束。和都指向，說明原型鏈到終止。 prototype原型對象每個函數都有一個默認的prototype屬性，其實際上還是一個對象，如果被用在繼承中，姑且叫做原型對象。在構造函數中的prototype中定義的屬性...

lindroid 2019-08-21 10:57 評論0 收藏0
Javascript重溫OOP之JS的解析與執行過程

摘要：了解面向對象編程之前，首先要了解的執行順序。的解析過程分為兩個階段預處理階段與執行期。在執行階段的執行上下文對象由賦值為指向對應函數了解js面向對象編程之前，首先要了解js的執行順序。js的解析過程分為兩個階段：預處理階段與執行期。預處理階段在預處理階段，js會首先創建一個執行上下文對象（Execute Context,然后掃描聲明式函數和用var定義的變量，將其加入執行上下文環...

xumenger 2019-08-21 10:56 評論0 收藏0