關于JavaScript中this的相關知識點

王偉廷發布于2019-08-19 18:31 / 3485人閱讀

摘要：關于提供了一種優雅的方式來隱式傳遞一個對象引用，因此可以將設計得更加簡潔并且易于復用。對于的誤解新手會誤認為指向函數本身。這時候，可以使用的方法強制使指向函數對象。的綁定和函數聲明的位置沒有任何關系，只取決于函數的調用方式。

關于this

this 提供了一種優雅的方式來隱式“傳遞”一個對象引用，因此可以將API設計得更加簡潔并且易于復用。

    /*
     *this 隱式傳遞上下文對象
     */
    function identify() {
        return this.name.toUpperCase();
    }
    
    function speak() {
        var greeting = "Hello, I am " + identify.call(this);
        console.log(greeting);
    }
    var me = {
        name: "kelly"
    }
    var you = {
        name: "lucy"
    }
    identify.call(me); //KELLY
    identify.call(you); //LUCY
    speak.call(me); //Hello, I am KELLY
    speak.call(you); //Hello, I am LUCY

隨著使用模式越來越復雜，顯式傳遞上下文對象會讓代碼變得越來越亂，使用this則不會這樣。

對于this的誤解

新手會誤認為this指向函數本身。

    /*
     *關于this的誤解
     */
    function foo(num) {
        console.log("foo: " + num);
        this.count++;
    }
    foo.count = 0;
    var i;
    for (i = 0; i < 10; i++) {
        if (i > 5) {
            foo(i);
        }
    }
    console.log(foo.count); //0

由此可見，瀏覽器解析語句產生了4條輸出，證明foo(...)確實被調用了4次，但是foo.count仍然是0，顯然從字面意思來理解this是錯誤的。
這時候，可以使用Function.call()的方法強制使this指向foo函數對象。

    /*
     *使用function.call()方法使this指向foo函數對象。
     */
    function foo(num) {
        console.log("foo: " + num);
        this.count++;
    }
    foo.count = 0;
    for (i = 0; i < 10; i++) {
        if (i > 5) {
            foo.call(foo, i)
        }
    }
    console.log(foo.count);

this 到底是什么

this是在運行時進行綁定的，并不是在編寫時綁定，它的上下文取決于函數調用時的各種條件。this的綁定和函數聲明的位置沒有任何關系，只取決于函數的調用方式。
當一個函數被調用時，會創建一個活動記錄。這個記錄會包含函數在哪里被調用、函數的調用方式、傳入的參數等信息。this就是這個記錄的一個屬性，會在函數執行的過程中用到。

小結

學習this的第一步是明白this既不指向函數自身也不指向函數的詞法作用域，拋開以前錯誤的假設和理解。
this實際上是在函數被調用時發生的綁定，它指向什么完全取決于函數在哪里被調用。

GPU云服務器云服務器 javascript中this詳解 javascript的this 關于使用linux的相關軟件關于網絡安全的知識

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

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

聊聊DOM中很重要的一個知識點：事件

摘要：事件事件就是瀏覽器告知程序，用戶的行為，用戶點擊了頁面中的某個按鈕或者用戶輸入用戶名或密碼等操作可以稱為事件事件的類型事件根據使用的場景不同，可以分為如下幾種依賴于設備的輸入事件鍵盤事件和鼠標事件，這些事件都是直接和設備相關的獨立于設備的輸事件事件就是瀏覽器告知JavaScript程序，用戶的行為，用戶點擊了HTML頁面中的某個按鈕或者用戶輸入用戶名或密碼等操作可以稱為事件事件的...

church 2019-08-23 11:42 評論0 收藏0
理解JavaScript的核心知識點：This

摘要：關鍵字計算為當前執行上下文的屬性的值。毫無疑問它將指向了這個前置的對象。構造函數也是同理。嚴格模式無論調用位置，只取顯式給定的上下文綁定的，通過方法傳入的第一參數，否則是。其實并不屬于特殊規則，是由于各種事件監聽定義方式本身造成的。 this 是 JavaScript 中非常重要且使用最廣的一個關鍵字，它的值指向了一個對象的引用。這個引用的結果非常容易引起開發者的誤判，所以必須對這個關...

TerryCai 2019-08-23 17:00 評論0 收藏0
JavaScript系列（四） - 收藏集 - 掘金

摘要：函數式編程前端掘金引言面向對象編程一直以來都是中的主導范式。函數式編程是一種強調減少對程序外部狀態產生改變的方式。 JavaScript 函數式編程 - 前端 - 掘金引言面向對象編程一直以來都是JavaScript中的主導范式。JavaScript作為一門多范式編程語言，然而，近幾年，函數式編程越來越多得受到開發者的青睞。函數式編程是一種強調減少對程序外部狀態產生改變的方式。因此，...

cfanr 2019-08-20 16:33 評論0 收藏0
JavaScript函數（二）

摘要：目錄函數的聲明函數的屬性和方法函數的作用域閉包知識點小結關于函數，可以從以下個方面去理解首先，數據類型上看函數在中是一種數據類型，是對象的一種其次，從功能上看函數本質上是一段反復調用的代碼塊最后，從地位上看函數在中和其他基本數據類型一樣，可目錄 1.函數的聲明 2.函數的屬性和方法 3.函數的作用域 4.閉包知識點 5.小結關于函數，可以從以下3個方面去理解：首先，數據類型上看：...

用戶84 2019-08-21 11:20 評論0 收藏0
JavasScript重難點知識

摘要：忍者級別的函數操作對于什么是匿名函數，這里就不做過多介紹了。我們需要知道的是，對于而言，匿名函數是一個很重要且具有邏輯性的特性。通常，匿名函數的使用情況是創建一個供以后使用的函數。 JS 中的遞歸遞歸, 遞歸基礎, 斐波那契數列, 使用遞歸方式深拷貝, 自定義事件添加這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果...

forsigner 2019-08-21 18:36 評論0 收藏0