JavaScript中this對(duì)象怎么使用

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

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括碌曲網(wǎng)站建設(shè)、碌曲網(wǎng)站制作、碌曲網(wǎng)頁(yè)制作以及碌曲網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，碌曲網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到碌曲省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

this對(duì)象是在函數(shù)運(yùn)行時(shí)，基于函數(shù)的執(zhí)行環(huán)境綁定的。

其實(shí)這句話的本質(zhì)就是，誰調(diào)用了函數(shù)，this就指向誰

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

全局函數(shù)

在全局環(huán)境中，this指向Window

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

上面的例子很簡(jiǎn)單，函數(shù)A在全局環(huán)境中執(zhí)行，也就是全局對(duì)象Window調(diào)用了函數(shù)。此時(shí)this指向Window

對(duì)象方法

作為對(duì)象方法調(diào)用時(shí)，this指向調(diào)用該方法的對(duì)象

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

到這里我們舉的例子都比較簡(jiǎn)單易懂，接下來來一個(gè)有意思的：

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

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

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

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

這也就是我們經(jīng)?？梢栽谝恍┐a中看到var self = this或者var that = this之類的原因了。

call和apply

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

call和apply算是老生常談，但還是稍微介紹下，怕新同學(xué)可能沒接觸過（其實(shí)是為了湊點(diǎn)字?jǐn)?shù)），拿call來說，語(yǔ)法是這樣的

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

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

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

在這里我們就可以看出call函數(shù)的意思了:指定一個(gè)對(duì)象o1去調(diào)用其他對(duì)象o2的方法，此時(shí)this對(duì)象指向o1

好了，那為什么前面我們說通常呢？因?yàn)?，這里的thisArg是可以指定為null和undefined的。請(qǐng)看：

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

此時(shí)的this指向全局對(duì)象Window

箭頭函數(shù)

es6中的箭頭函數(shù)現(xiàn)在也用的比較頻繁，但是有個(gè)需要注意的點(diǎn)是：

函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。

其實(shí)出現(xiàn)這種情況的根本原因是:箭頭函數(shù)沒有this對(duì)象，所以箭頭函數(shù)的this就是外層代碼的this

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

這個(gè)例子和前面例子2是基本一樣的，只是把普通函數(shù)改寫成箭頭函數(shù)，但是此時(shí)的this對(duì)象已經(jīng)指向了外層的Window。

考慮到這一點(diǎn)可能不好理解，我們?cè)倏磶讉€(gè)例子:

//例子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è)例子里，g的getThis寫法就和之前的例子3一樣，由于函數(shù)在全局環(huán)境中運(yùn)行，所以此時(shí)this指向Window；h的getThis使用了箭頭函數(shù)，所以this指向了外層代碼塊的this所以，此時(shí)this指向的是h。

關(guān)于“JavaScript中this對(duì)象怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

網(wǎng)站標(biāo)題：JavaScript中this對(duì)象怎么使用
鏈接URL：http://muchs.cn/article8/pgddip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站內(nèi)鏈、商城網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站制作、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)