JavaScript中this對象怎么使用

這篇文章主要介紹“JavaScript中this對象怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“JavaScript中this對象怎么使用”文章能幫助大家解決問題。

this對象是在函數運行時，基于函數的執行環境綁定的。

其實這句話的本質就是，誰調用了函數，this就指向誰

具體的來說，通常有以下幾種情況：

全局函數

在全局環境中，this指向Window

//例子1
 function A() {
 console.log(this)
 }
 A();//Window

上面的例子很簡單，函數A在全局環境中執行，也就是全局對象Window調用了函數。此時this指向Window

對象方法

作為對象方法調用時，this指向調用該方法的對象

//例子2
var b = {
 getThis:function(){
  console.log(this)
 }
}
b.getThis()//b

到這里我們舉的例子都比較簡單易懂，接下來來一個有意思的：

//例子3
 var c = {
 getFunc:function(){
  return function(){
  console.log(this)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//Window

這個例子和前一個例子不一樣，運行c.getFunc()時，首先返回的是一個匿名函數，我們將這個函數賦值給cFun，接著在全局環境中調用了cFun()，所以此時this指向的還是Window。

如果我們一定要讓這里返回的是c對象呢？在開頭我們說過，this對象是在函數執行時確定的，在例子3中，執行c.getFunc()時，this對象指向的還是c，所以我們只要保持住這個this就好了,對上面的代碼稍微改動：

//例子4
 var c = {
 getFunc:function(){
  var that = this //在這里保留住this
  return function(){
  console.log(that)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//c

這也就是我們經常可以在一些代碼中看到var self = this或者var that = this之類的原因了。

call和apply

此時this對象通常指向函數中指定的this值(注意這里的通常2字，考試要考的)

call和apply算是老生常談，但還是稍微介紹下，怕新同學可能沒接觸過（其實是為了湊點字數），拿call來說，語法是這樣的

fun.call(thisArg, arg1, arg2, ...)

這個方法怎么用呢，看下面的例子：

//例子5
var d = {
 getThis:function(){
  console.log(this)
 }
}
var e = {
 name:'e'//(給e寫個`name`屬性只是因為覺得孤零零的太難看了~~)
}
d.getThis.call(e)//e

在這里我們就可以看出call函數的意思了:指定一個對象o1去調用其他對象o2的方法，此時this對象指向o1

好了，那為什么前面我們說通常呢？因為，這里的thisArg是可以指定為null和undefined的。請看：

//例子6
var d = {
 getThis:function(){
  console.log(this)
 }
}
 d.getThis.call(null)//Window
 d.getThis.call(undefined)//Window

此時的this指向全局對象Window

箭頭函數

es6中的箭頭函數現在也用的比較頻繁，但是有個需要注意的點是：

函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。

其實出現這種情況的根本原因是:箭頭函數沒有this對象，所以箭頭函數的this就是外層代碼的this

//例子7
 var f = {
  getThis:()=>{
   console.log(this)
  }
 }
 f.getThis()//Window

這個例子和前面例子2是基本一樣的，只是把普通函數改寫成箭頭函數，但是此時的this對象已經指向了外層的Window。

考慮到這一點可能不好理解，我們再看幾個例子:

//例子8
 var g = {
 getThis:function(){
  return function(){console.log(this)}
 }
 }
 var h = {
 getThis:function(){
  return ()=> console.log(this)
 }
 }
 g.getThis()()//Window
 h.getThis()()//h

這個例子里，g的getThis寫法就和之前的例子3一樣，由于函數在全局環境中運行，所以此時this指向Window；h的getThis使用了箭頭函數，所以this指向了外層代碼塊的this所以，此時this指向的是h。

關于“JavaScript中this對象怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。