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

時間 2019-11-08

原文原文鏈接

前言

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

1. 全局做用域中的`this`

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

"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等於undefinedjava

"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指向觸發事件的目標對象。this

"use strict";
    
    function blue_it(e){
      if(this === e.target){
        this.style.backgroundColor = "#00f";
      }
    }
    var elements = document.getElementsByTagName('*');
    for(var i=0 ; i<elements.length ; i++){
      elements[i].onclick = blue_it;
    }
    
    //這段代碼的做用是使被單擊的元素背景色變爲藍色

6. 內聯事件處理函數中的`this`

在嚴格模式下，在內聯事件處理函數中，有如下兩種狀況：spa

<button onclick="alert((function(){'use strict'; return this})());">
      內聯事件處理1
    </button>
    <!-- 警告窗口中的字符爲undefined -->
    
    <button onclick="'use strict'; alert(this.tagName.toLowerCase());">
      內聯事件處理2
    </button>
    <!-- 警告窗口中的字符爲button -->