如何判斷JavaScript中this的指向

都說JavaScript 是一種很靈活的語言，這其實也可以說它是一個混亂的語言,下面透過本文給大家分享JavaScript中this的指向知識，有興趣的朋友一起看看吧

都說JavaScript 是一種很靈活的語言，其實也可以說它是一個混亂的語言。它把 函數式程式設計 和 物件導向程式設計 糅合一起，再加上 動態語言 特性，簡直強大無比（其實是不能和C++比的，^_^ ）。

JS 裡的this

• #在function 內部被建立

指向呼叫時所在函數所綁定的物件（拗口）this 不能被賦值，但可以被call/apply  改變

目錄

* 一個特例

* 開始判斷

    * 法則一：物件方法中的this指向物件本身（箭頭函數形式的除外）
    * 法則二：多層巢狀函數中的this指向等同於包含該this的最近一個function的this

    * 法則三：箭頭函數以及非指向物件方法中的function的情況下this指向window

* 習題集

    * 普通函數中的this

    * 函數執行後返回另一個函數中的this（普通函數中）
    * 多層巢狀函數中的this（計時器&箭頭函數）1

    * 多層巢狀函數中的this（定時器&箭頭函數）2

##一個特例

在正式開始之前，我們先來講一個特例。

// 构造函数
function Student(name) {
 this.name = name
}
// 创建小明和小红两个实例
var XM = new Student('xiaoming')
var XH = new Student('xiaohong')
// 输出信息
console.log(XM) // Student {name: "xiaoming"}
console.log(XH) // Student {name: "xiaohong"}

在建構子中，this上的值會在建立實例的時候被綁定到新建立的實例上。不適用於下面的判斷方法，所以特此說明。 ############開始判斷############下面是典型例子，我們的分析從這裡開始。 ############

var x = {
 name: 'bw2',
 getName1: function() {
 console.log(this)
 },
 getName2: function() {
 setTimeout(() => {
  console.log(this)
 },0)
 },
 getName31: () => {
 console.log(this)
 },
 getName32: function() {
 return function() {
  console.log(this)
 }
 }
}
x.getName1() // {name: "bw2", getName1: ƒ}
x.getName2() // {name: "bw2", getName1: ƒ}
x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

###法則一：物件方法中的this指向物件本身（箭頭函數形式的除外）############

var x = {
 name: 'bw2',
 getName1: function() {
 console.log(this)
 }
}
x.getName1() // {name: "bw2", getName1: ƒ}

###法則二：多層巢狀函數中的this指向等同於包含該this的最近一個function的this######箭頭函數沒有獨立的this作用域，所以繼續往外層走，走到了getName: function( ){}。那麼就是他了，this指向等同於這個function內部的this指向。根據法則一，this指向物件本身。 ############

var x = {
 name: 'bw2',
 getName2: function() {
 console.log(this) // 等同于此处的this
 setTimeout(() => {
  console.log(this) // 原始的this位置
 },0)
 }
}
x.getName2() // {name: 'bw2', getName1: ƒ}

###我們可以試著在瀏覽器中運行，看看結果。 ######法則三：箭頭函數以及非指向物件方法中的function的情況下this指向window######根據法則二，this是指向最近的function，因此，這裡的this等同於返回的函數中的this，不是物件方法中的this，所以，指向全域。 ######是不是覺得有點奇怪？不過實踐證明確實如此。 ############

var x = {
 name: 'bw2',
 getName31: () => {
 console.log(this)
 },
 getName32: function() {
 return function() {
  console.log(this)
 }
 }
}
x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}

#########習題集############歡迎大家依照法則一到三依序判斷，猜測結果，並在瀏覽器下測試。測試結果也可以回复，大家一起討論。 ######因本人能力有限，此系列法則可能在部分情況下失效。歡迎大家一起討論。 ######下面是做題時間。 #########普通函數中的this###############

function x() {
 console.log(this)
}
x()

###函數執行後會傳回另外一個函數中的this（普通函數中）## ##########

function xx(){
 return function() {
 console.log(this)
 }
}
xx()()

###多層巢狀函數中的this（定時器&箭頭函數）1############

var x = {
 name: 'bw2',
 getName: () => {
 setTimeout(() => {
  console.log(this)
 },0)
 }
}
x.getName()

###多層嵌套函數中的this（定時器&箭頭函數）2############

var x = {
 name: 'bw2',
 getName: () => {
 setTimeout(function() {
  console.log(this)
 },0)
 }
}
x.getName()

####再次說明，該法則為實驗性法則，未進行大範圍的測試，不保證在所有情況下都有一致的結果。如果你發現了法則判斷失敗的情況，歡迎留言，一起探討。 ###

以上是如何判斷JavaScript中this的指向的詳細內容。更多資訊請關注PHP中文網其他相關文章！