1. 程式人生 > >js嚴格模式下this指向

js嚴格模式下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);

;
    
    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<elements.length ; i++){
      elements[i].onclick = blue_it;
    }
    
    //這段程式碼的作用是使被單擊的元素背景色變為藍色

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

在嚴格模式下,在內聯事件處理函式中,有以下兩種情況:

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

參考資料

延伸資料