詳解原生JavaScript的this指向問題和強制改變this指向的三種方法

this關鍵字概念

面向對象語言中 this 表示目前對象的一個引用。

但在 JavaScript 中 this 不是固定不變的，它會随着執行環境的改變而改變。

this在幾種情況下指向誰

1.在方法中,this 表示該方法所屬的對象。

var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// 顯示對象的資料
document.getElementById("demo").innerHTML = person.fullName();
浏覽器顯示内容為:John Doe  
           

2.如果單獨使用,this 表示全局對象。

"use strict";
var x = this;
在浏覽器中，window 就是該全局對象為 [object Window]
           

3.在函數中,this 表示全局對象。

function myFunction() {
  return this;
}
在浏覽器中，window 就是該全局對象為 [object Window]
window.myFunction();
           

4.在函數中,在嚴格模式下,this 是未定義的(undefined)。

<button onclick="this.style.display='none'">
	點我後我就消失了
</button>
           

5.在事件中,this 表示接收事件的元素。

<button onclick="this.style.display='none'">
	點我後我就消失了
</button>
           

強制改變this指向的三種方法

call()方法

格式 函數名.call();
參數： 
	第一個參數:傳入該函數this指向的對象，傳入什麼強制指向什麼
	第二個參數:将原函數的參數往後順延一位。
	show.call('call',10,20);
           

apply()方法

格式 函數名.apply();
參數： 
	第一個參數:傳入該函數this指向的對象，傳入什麼強制指向什麼
	第二個參數:數組,數組裡面放入我們原有的參數
	show.apply('ap',[10,20])
           

bind() 方法:預設this指向

先通過bind的預設下thie指向，然後傳回一個新函數，此時這個新函數this已經指向bb了
var a = show.bind('bb');
a(10,20);
簡寫:show.bind('bb')(10,20);  
show.bind('指向的名字')('原來的參數')