Javascript Context和Scope的學習總結02【轉自cnblogs的JKhuang】

Aldous 發布于2019-08-21 15:05 / 1183人閱讀

摘要：總結本博文通過介紹執行上下文和作用域的異同的使用以及變量對象，讓我們加深對語言特性的理解。首先，我們介紹了執行上下文和的的關系，并且執行上下文是具有對象的然后，介紹了作用域使變量在作用域范圍內可見，并且作用域是基于函數的。

接上一篇Javascript Context和Scope的學習總結01【轉自cnblogs的JKhuang】（可能是segmentfault對單篇文章發布字數有限制，也沒有提示，繼續編輯chrome就會崩潰）

使用作用域解決上下文問題

接下來，繼續看一個例子，我們要在函數setTimeout()中調用方法onTimeout()，具體定義如下：

/**
 * setTimeout function with Broken Context issue
 * @type {Object}
 */
var o = {
    x:23,
    onTimeout: function(){
        console.log("x:", this.x);
    },
    m: function(){
        setTimeout(function(){
            this.onTimeout(); // ERROR: this.onTimeout is not a function
        }, 1);
    }
}
o.m();

同樣在函數setTimeout()中調用方法onTimeout()失敗，我們知道這是由于方法onTimeout()不能獲取對象執行上下文。

我們知道在方法m()中可以獲取對象執行上下文，所以可以通過臨時變量引用this指向的對象，實例代碼如下：

/**
 * Fixs setTimeout function with Broken Context issue.
 * @type {Object}
 */
var o = {
    x:23,
    onTimeout: function(){
        console.log("x:", this.x); // outputs 23
    },
    m: function(){
        
        // Keeps instance reference.
        var self = this;
        setTimeout(function(){
           // Gets m scrope. 
            self.onTimeout();
        }, 1);
    }
}
o.m();

上面，我們通過臨時變量self保存了this的引用，由于setTimeout()函數可以獲取m()的作用域，所用我們可以通過self. onTimeout()的方式調用onTimeout()方法。

總結

本博文通過介紹執行上下文和作用域的異同、this的使用以及變量對象，讓我們加深對Javascript 語言特性的理解。

首先，我們介紹了執行上下文和this的的關系，并且執行上下文是具有對象的；然后，介紹了作用域使變量在作用域范圍內可見，并且作用域是基于函數的。

我們通過具體的例子介紹了在不同的作用域和執行上下文中，對this和變量的影響加深了作用域和執行上下文的理解，從而幫助我們更好的閱讀和編寫代碼。

參考

http://blog.goddyzhao.me/post...

http://clubajax.org/javascrip...

云服務器 GPU云服務器 javascript學習總結 javascript的學習學習javascript的 php和javascript的區別

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

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

Javascript Context和Scope的學習總結01【轉自cnblogs的JKhuang】

摘要：正文執行環境也稱為環境是中最為重要的一個概念。執行環境定義了變量或函數有權訪問的其他數據，決定了它們各自的行為。簡而言之，執行環境是基于對象的，而作用域是基于函數的。前述在我們學習Javascript過程中，常常會遇到作用域（Scope）和執行上下文（Context）等概念。其中，執行上下文與this關鍵字的關系密切。有面向對象編程經驗的各位，對于this關鍵字再熟悉不過了，因此...

April 2019-08-21 15:06 評論0 收藏0
Javascript this 的一些學習總結02【轉自cnblogs的JKhuang】

摘要：發生這種情況的條件是當引用類型值的對象恰好為活躍對象。總結本文介紹中的使用，更重要的是幫助我們能更好地理解值在全局函數構造函數以及一些特例的情況中值的變化。然而，由于對于來說沒有任何意義，因此會隱式轉換為全局對象。接上一篇Javascript this 的一些學習總結02【轉自cnblogs的JKhuang】引用類型以及this的null值對于前面提及的情形，還有例外的情況，當調...

suemi 2019-08-21 15:06 評論0 收藏0
Javascript this 的一些學習總結01【轉自cnblogs的JKhuang】

摘要：函數上下文中的值是函數調用者提供并且由當前調用表達式的形式而定的。然而，由于對于來說沒有任何意義，因此會隱式轉換為全局對象。這里注意到四個表達式中，只有第一個表達式是指向對象的，而其他三個表達式則執行。摘要相信有C++、C#或Java等編程經驗的各位，對于this關鍵字再熟悉不過了。由于Javascript是一種面向對象的編程語言，它和C++、C#或Java一樣都包含this關鍵字...

Thanatos 2019-08-21 15:05 評論0 收藏0
javascript作用域，作用域鏈，[[scope]]屬性

摘要：正式由于作用域鏈的這種關系，我們就不難理解，為什么和不能通過作用域鏈向上搜索，因為對和的搜索在當前執行函數的活動對象就停止了。對于Javascript程序員來說，閉包總會讓你覺得既熟悉又陌生，然而它對于開發人員來說卻非常重要，javascript里的許多設計模式中都用到了閉包，此處以函數作用域為例。 //示例代碼 var a=1; function foo(){ ...

pkhope 2019-08-20 13:33 評論0 收藏0
JavaScript閉包

摘要：此時的作用域鏈包含了兩個對象的活動對象和對象。閉包的應用場景保護函數內的變量安全。依然如前例，由于閉包，函數中的一直存在于內存中，因此每次執行，都會給自加。引子 JS的閉包一直是很多人不理解，也是在使用過程中經常出現問題的地方。每次看文章都會有所了解閉包，但是，用起來還是不對，而且錯誤百出，其關鍵問題還是出在對其不理解，不了解。此文章會不定期更新以及完善，希望在我學習的時候，讓大家也...

Tony 2019-08-19 17:54 評論0 收藏0