首頁 > web前端 > js教程 > js中this物件用法實例詳解

js中this物件用法實例詳解

小云云
發布: 2018-01-08 09:06:30
原創
1473 人瀏覽過

this物件是在函數運行時,基於函數的執行環境綁定的。本文主要介紹了js中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。

總結

一般情況下this物件指向呼叫函數的對象,全域環境中執行函數this物件指向Window

在call和apply函數中this指向指定的對象,如果指定的對為undefined或null,那麼this對象指向Window

在箭頭函數中,this對像等同於外層程式碼區塊的this

相關推薦:

js中this和event 的區別實例詳解

JS中this引發bug分析

JavaScript 中的 this 全面解析

以上是js中this物件用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板