javascript學習筆記(1)

Chaz 發布于2019-08-21 10:31 / 1308人閱讀

摘要：關于作用域實現的描述任何執行上下文時刻的作用域，都是由作用域鏈來實現的。在一個函數被定義的時候，會將它此時的作用域鏈鏈接到這個函數對象的屬性。參考資料鳥哥作用域原理理解作用域和作用域鏈阮一峰老師微博上的關于作用域的一道題

javascript作用域原理學習

　　在每次調用一個函數的時候，就會進入一個函數內的作用域，當從函數返回
以后，就會返回調用前的作用域。
　　ECMA262關于作用域實現的描述：

任何執行上下文時刻的作用域，都是由作用域鏈(scope chain)來實現的。
在一個函數被定義的時候，會將它此時的作用域鏈鏈接到這個函數對象的[[scope]]屬性。
在一個函數被調用時，會創建一個活動對象，然后對于函數的每一個形參，都命名為該活動對象的命名屬性,然后將這個活動對象做為此時的作用域鏈最前端，并將這個函數的[[scope]]屬性加入到作用域鏈中。

用例子說明。來自鳥哥的博客；

function factory() {
     var name = "Elric";
     var intro = function(){
          alert("I am " + name);
     }
     return intro;
}

function app(para){
     var name = para;
     var func = factory();
     func();
}

app("eva");

我是這么理解的：
因為

JavaScript中的函數運行在它們被定義的作用域里,而不是它們被執行的作用域里.

所以，intro的作用域鏈應該是 intro --> factory --> window
當調用進入到intro時，對name的查找不會進入app的作用域，所以輸出的值是Elric

再來一個例子。來自阮一峰老師的微博；

function a(x, y) {
    y = function(){
        x = 2;
    };
    return function() {
        var x = 3;
        y();
        console.log(x);
    }.apply(this, arguments);
}

a();// 3

我是這么理解的：
按照定義來，return的匿名函數的作用域鏈應該是[[scope]] --> a -->window
所以，在調用的時候，它最先找到的是自己的x的值，而執行y，修改的是a中的x的值。
如果把代碼改成：

function a(x, y) {
    var x = 1;
    y = function() {
        x = 2;
    };
    return function() {
        y();
        console.log(x);
    }.apply(this, arguments);
}

a();// 2

這里輸出的本來應該是1，但是！但是執行了y，y把a中的x修改成2.因為y的作用域鏈是y -->a -->window;

然后，在segmentfault上看到的

function a(x, y) {
    var name = 1;
    y = function() {
        x = 2;
    };
    return function() {
       var name = 3;
        y();
        console.log(this.x);
    }.apply(this, arguments);
}

a();// undefined

我簡單的理解為，這里的this.x相當于window.x。所以是undefined。

總結：

JavaScript中的函數運行在它們被定義的作用域里,而不是它們被執行的作用域里.
從定義出發去分析函數的作用域，而不是通過調用的順序。

參考資料
1.鳥哥：Javascript作用域原理　　
2.理解 JavaScript 作用域和作用域鏈
3.阮一峰老師微博上的關于js作用域的一道題

云服務器 GPU云服務器 javascript學習筆記學習筆記學習筆記一基礎學習筆記

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

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

重學前端學習筆記（七）--JavaScript對象：面向對象還是基于對象？

摘要：對象有狀態對象具有狀態，同一對象可能處于不同狀態之下。中對象獨有的特色對象具有高度的動態性，這是因為賦予了使用者在運行時為對象添改狀態和行為的能力。小結由于的對象設計跟目前主流基于類的面向對象差異非常大，導致有不是面向對象這樣的說法。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些...

mayaohua 2019-08-02 16:15 評論0 收藏0
重學前端學習筆記（七）--JavaScript對象：面向對象還是基于對象？

摘要：對象有狀態對象具有狀態，同一對象可能處于不同狀態之下。中對象獨有的特色對象具有高度的動態性，這是因為賦予了使用者在運行時為對象添改狀態和行為的能力。小結由于的對象設計跟目前主流基于類的面向對象差異非常大，導致有不是面向對象這樣的說法。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些...

yy736044583 2019-08-29 18:47 評論0 收藏0
重學前端學習筆記（七）--JavaScript對象：面向對象還是基于對象？

摘要：對象有狀態對象具有狀態，同一對象可能處于不同狀態之下。中對象獨有的特色對象具有高度的動態性，這是因為賦予了使用者在運行時為對象添改狀態和行為的能力。小結由于的對象設計跟目前主流基于類的面向對象差異非常大，導致有不是面向對象這樣的說法。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些...

xingpingz 2019-08-23 17:17 評論0 收藏0
JavaScript框架學習筆記（一）

摘要：基本的學習思路是跟著框架設計這本書，甚至可以說是這本書的讀書筆記。也參考很多網上解讀的博客和學習資料。當然，最重要的資料還是框架的源代碼。后來由于開發者反對，新興的框架都在命名空間上構建。 JavaScript框架學習筆記（一）我為什么要學習框架更深入的理解工具，以后用起來更順手而且也能做一定的工具取舍，學習理解新工具也就更快，對提升js水平也很有幫助，框架有很多解決坑的經典思...

Shonim 2019-08-19 18:10 評論0 收藏0
JavaScript高級程序設計學習筆記一（JavaScript簡介）

摘要：在上百種語言中算是命好的一個，還有就是最近納入高考體系的。由以下三個部分構成。就是對實現該標準規定的各個方面內容的語言的描述。是針對但經過擴展的用于的應用程序編程接口。將頁面映射為由節點構成的樹狀結構。 JavaScript的歷史這里就不再贅述了，當然JavaScript的歷史還是比較有意思的。在上百種語言中JavaScript算是‘命’好的一個，還有就是最近納入高考體系的python...

supernavy 2019-08-22 11:17 評論0 收藏0