JavaScript 嚴格模式下this的幾種指向

smallStone 發布于2019-08-21 15:59 / 1676人閱讀

摘要：前言曾經被中的弄暈了，今天整理總結一下在嚴格模式下的幾種指向。嚴格模式構造函數中的事件處理函數中的在嚴格模式下，在事件處理函數中，指向觸發事件的目標對象。

前言

曾經被 JavaScript 中的 this 弄暈了，今天整理總結一下在嚴格模式下 this 的幾種指向。

1. 全局作用域中的this

在嚴格模式下，在全局作用域中，this指向window對象

    "use strict";
    
    console.log("嚴格模式");
    console.log("在全局作用域中的this");
    console.log("this.document === document",this.document === document);
    console.log("this === window",this === window);
    this.a = 9804;
    console.log("this.a === window.a===",window.a);

2. 全局作用域中函數中的this

在嚴格模式下，這種函數中的this等于undefined

    "use strict";
    
    console.log("嚴格模式");
    console.log("在全局作用域中函數中的this");
    function f1(){
      console.log(this);
    }
    
    function f2(){
      function f3(){
        console.log(this);
      }
      f3();
    }
    f1();
    f2();

3. 對象的函數（方法）中的this

在嚴格模式下，對象的函數中的this指向調用函數的對象實例

    "use strict";
    
    console.log("嚴格模式");
    console.log("在對象的函數中的this");
    var o = new Object();
    o.a = "o.a";
    o.f5 = function(){
      return this.a;
    }
    console.log(o.f5());

4. 構造函數的this

在嚴格模式下，構造函數中的this指向構造函數創建的對象實例。

    "use strict";
    
    console.log("嚴格模式");
    console.log("構造函數中的this");
    function constru(){
      this.a = "constru.a";
      this.f2 = function(){
        console.log(this.b);
        return this.a;
      }
    }
    var o2 = new constru();
    o2.b = "o2.b";
    console.log(o2.f2());

5. 事件處理函數中的this

在嚴格模式下，在事件處理函數中，this指向觸發事件的目標對象。

    "use strict";
    
    function blue_it(e){
      if(this === e.target){
        this.style.backgroundColor = "#00f";
      }
    }
    var elements = document.getElementsByTagName("*");
    for(var i=0 ; i
6. 內聯事件處理函數中的this

在嚴格模式下，在內聯事件處理函數中，有以下兩種情況：
    
    
    
    
    
后語
參考資料
MDN https://developer.mozilla.org...

延伸資料

阮一峰的網絡日志 > JavaScript 嚴格模式詳解 http://www.ruanyifeng.com/blo...

菜鳥教程 > JavaScript 嚴格模式 http://www.runoob.com/js/js-s...

GPU云服務器云服務器 javascript嚴格模式嚴格模式最基本的幾種 html的幾種輪播

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

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

影響JavaScript中this指向的幾種函數調用方法

摘要：前言初學總會對指向感到疑惑，想要深入學習，必須先理清楚和相關的幾個概念。中總是指向一個對象，但具體指向誰是在運行時根據函數執行環境動態綁定的，而并非函數被聲明時的環境。除去不常用的和的情況，具體到實際應用中，指向大致可以分為以下種。前言初學javascript總會對this指向感到疑惑，想要深入學習javascript，必須先理清楚和this相關的幾個概念。javascript中t...

Drinkey 2019-08-23 13:04 評論0 收藏0
js里this的幾種用法

摘要：的幾種用法關于是什么理論上是執行上下文的一個屬性，的值在進入到執行上下文的時候就已經確定了，且不會再改變。默認綁定這種情況下，不屬于任何一個函數方法內，即在全局作用域下，這種情況下稱為默認綁定。最后的總結用偽代碼的形式來表示例外例外本文參考 this的幾種用法關于this this是什么？理論上this是執行上下文的一個屬性，this的值在進入到執行上下文的時候就已經確定了，且不會...

melody_lql 2019-08-20 15:37 評論0 收藏0
理解JavaScript中的this關鍵詞

摘要：除此之外，還有一種情況也會修改，在一些庫中傳入回調函數，可能會強制改變的綁定，例如在中本例中的就是被強制改變綁定到了觸發事件的元素上。它們的第一個參數是一個對象，它們會把這個對象綁定到，接著在調用函數時指定這個。理解JavaScript中的this關鍵詞 this關鍵詞是JavaScript語言中一個很重要，同時也是一個非常復雜的機制，它同時也是一個很特殊的關鍵詞，它一般會被自動定義...

paulquei 2019-08-20 10:45 評論0 收藏0
JavaScript中的this

摘要：作為構造函數何為構造函數所謂構造函數就是用來對象的函數，像等都是全局定義的構造函數。正在跑步正在說話正在跑步正在說話如上，如果函數作為構造函數用，那么其中的就代表它即將出來的對象。前言總括:詳解JavaScript中的this的一篇總結，不懂this這個難點，很多時候會造成一些困擾，寫出一些bug不知如何收場，所以一起來寫bug吧，不對，一起來寫代碼吧。原文地址：JavaScr...

SimpleTriangle 2019-08-20 18:15 評論0 收藏0
#yyds干貨盤點# 前端基礎知識面試集錦3

摘要：當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址后從堆中獲得實體如何實現繼承構造繼承原型繼承實例繼承拷貝繼承原型機制或和方法去實現較簡單，建議使用構造函數與原型混合方式。它是基于的一個子集。 JavaScript介紹js的基本數據類型。Undefined、Null、Boolean、Number、Stri...

番茄西紅柿 2021-11-22 15:29 評論0 收藏2637