麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > JavaScript > 正文

js中this對象用法分析

2019-11-19 14:35:47
字體:
來源:轉載
供稿:網友

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

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

具體的來說,通常有以下幾種情況:

全局函數

在全局環境中,this指向Window

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

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

對象方法

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

//例子2var 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, ...)

這個方法怎么用呢,看下面的例子:

//例子5var 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的。請看:

//例子6var 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

然后依然是每次都一樣的結尾,如果內容有錯誤的地方歡迎指出;如果對你有幫助,歡迎點贊和收藏,感謝你對武林網的支持。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 欧美一级毛片特黄黄 | 国产免费高清在线视频 | 美女91视频| 国产人妖一区二区 | 欧美18videos性处按摩 | 91成人免费看片 | 视频一区国产精品 | 免费久久久久 | 国产成人高清成人av片在线看 | 毛片三区| 91色琪琪电影亚洲精品久久 | 久久精品视频一区二区三区 | 欧美特级一级毛片 | 欧美成人一级 | 久久国产一级片 | 日韩一级毛毛片 | 久久久久久久免费精品 | 综合国产一区 | 国产人成免费爽爽爽视频 | 高清av在线 | 亚洲天堂岛国片 | 欧美人成在线 | 成人做爰高潮片免费视频韩国 | 日本黄色大片免费 | 久久成人视屏 | 国产午夜免费视频 | 久久成人福利 | 49vv看片免费 | 国产精品久久久久久久四虎电影 | 99欧美视频 | 爱操av| 毛片免费看电影 | 亚洲精品在线观看免费 | 99精品视频在线看 | 国产成人精品一区在线播放 | 视频在线亚洲 | 国产成视频在线观看 | 一区二区久久精品66国产精品 | 羞羞视频免费网站含羞草 | 国产精品国产三级国产在线观看 | 日韩精品中文字幕在线观看 |