javascript的this指向怎么理解

本文小編為大家詳細(xì)介紹“javascript的this指向怎么理解”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“javascript的this指向怎么理解”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

創(chuàng)新互聯(lián)公司致力于成都網(wǎng)站建設(shè)、網(wǎng)站制作,成都網(wǎng)站設(shè)計(jì),集團(tuán)網(wǎng)站建設(shè)等服務(wù)標(biāo)準(zhǔn)化，推過(guò)標(biāo)準(zhǔn)化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務(wù)水平進(jìn)行質(zhì)量交付，讓企業(yè)網(wǎng)站從市場(chǎng)競(jìng)爭(zhēng)中脫穎而出。 選擇創(chuàng)新互聯(lián)公司，就選擇了安全、穩(wěn)定、美觀(guān)的網(wǎng)站建設(shè)服務(wù)！

this的指向

在我們看見(jiàn)的各種介紹如何判斷this的指向方法中，"this的最終指向的是那個(gè)調(diào)用它的對(duì)象"這句話(huà)被視作核心，但是面對(duì)多種多樣的情況，我們?nèi)菀赘慊?。針?duì)針對(duì)多種情況結(jié)合我的理解，我提出了一句話(huà) “箭頭，定時(shí)和構(gòu)造，特殊情況特殊看，普通調(diào)用看點(diǎn)號(hào)，后面有點(diǎn)不看前，然后就近原則判，最后剩下就是window”。

箭頭函數(shù)

箭頭函數(shù)的本身沒(méi)有this，所有不存在this改變，它捕獲外層的this使用

var name = "windowsName";
var a = {
    name: "Cherry",
    fn() {
      setTimeout(()=>{
        console.log(this.name); 
      },0)
    }
}

a.fn() //Cherry

解析: 首先對(duì)象a調(diào)用fn函數(shù)，所以fn函數(shù)的this指向?qū)ο骯，然后箭頭捕獲外層this，那么就不是setTimeout里的this，而是fn函數(shù)的this，所以最后拿到對(duì)象a里的name

定時(shí)器

對(duì)于延時(shí)函數(shù)內(nèi)部的回調(diào)函數(shù)的this指向全局對(duì)象window

var name = "windowsName";
var a = {
    name: "Cherry",
    fn() {
      setTimeout(function (){
        console.log(this.name); 
      },0)
    }
}

a.fn() //windowsName

解析： 首先對(duì)象a調(diào)用fn函數(shù)，然后這里setTimeout里的回調(diào)函數(shù)是匿名函數(shù)，為普通的函數(shù)，那么匿名函數(shù)中的this指向的就是window

var name = "windowsName";
var b={
  name: "setTimeoutName"
}
var a = {
    name: "Cherry",
    fn() {
      setTimeout((function (){
        console.log(this.name); 
      }).bind(b),0)
    }
}

a.fn() //setTimeoutName

解析：首先對(duì)象a調(diào)用fn函數(shù)，然后這里setTimeout里的回調(diào)函數(shù)是匿名函數(shù)，為普通的函數(shù)，那么匿名函數(shù)中的this指向的就是window，但使用bind改變匿名函數(shù)的this指向?yàn)閷?duì)象b，所以最后對(duì)象b里的name

構(gòu)造函數(shù)

構(gòu)造函數(shù)中的this指向創(chuàng)建的實(shí)例對(duì)象，

注意：如果構(gòu)造函數(shù)中返回一個(gè)對(duì)象，創(chuàng)建時(shí)不會(huì)有新的實(shí)例對(duì)象，而是這個(gè)返回的對(duì)象

function fn(){
  this.age = 37;
}

var a = new fn();
console.log(a.age); // 37
a.age = 38;
console.log(fn); // { this.age = 37; }
console.log(a.age); // 38

解析：這里我們通過(guò)構(gòu)造函數(shù)創(chuàng)建實(shí)例對(duì)象a，相當(dāng)于開(kāi)辟一個(gè)新地方將構(gòu)造函數(shù)內(nèi)容復(fù)制過(guò)來(lái)，就有了a對(duì)象，這時(shí)候this指向的就是對(duì)象a，我們修改對(duì)象a中內(nèi)容不影響構(gòu)造函數(shù)

點(diǎn)號(hào)判斷

通過(guò).判斷this指向，遵循就近原則

var a = {
  age:10,
  b: {
      age:12,
      fn(){
          console.log(this.age); 
      }
  }
}
a.b.fn(); //12

解析：對(duì)象a調(diào)用對(duì)象b的fn函數(shù)，fn函數(shù)前面有兩個(gè).，那么最近的是對(duì)象b，所以fn函數(shù)的this指向的就是對(duì)象b，最后拿到的就是對(duì)象b的age

var a = {
  age:10,
  b: {
      age:12,
      fn(){
          console.log(this.age); //undefined
      }
  }
}
var c = {
  age:20,
}

var d = {
  age:30,
}
a.b.fn.bind(c).bind(d)(); //20

解析：對(duì)象a調(diào)用對(duì)象b的fn函數(shù)然后使用bind改變this的指向，這時(shí)候fn前后前后都有.，不看前面的.，只用看后面的，然后最近的bind改變this指向?yàn)閏，那么此時(shí)fn函數(shù)的this指向的就是對(duì)象c，拿到的就是對(duì)象c的age

練習(xí)

function outerFunc() {
   console.log(this) // { x: 1 }
   function func() {
    console.log(this) // Window 
   }
   func()
} 

outerFunc.bind({ x: 1 })()

obj = {
  func() {
    const arrowFunc = () => {
      console.log(this._name)
    }

    return arrowFunc
  },

  _name: "obj",
}

obj.func()() //obj

func = obj.func
func()()  //undefined

obj.func.bind({ _name: "newObj" })()() //newObj

obj.func.bind()()() //undefined

obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })() //bindObj

apply、call、bind

使用 apply、call、bind 函數(shù)可以改變this的指向，上面this的例子中使用到

區(qū)別

thisArg , [ argsArray] call(thisArg, arg1, arg2, ...)

apply和call函數(shù)區(qū)別在于this后面?zhèn)魅氲膮?shù)，apply中傳的是一個(gè)數(shù)組，而call中傳入的是展開(kāi)的參數(shù)

bind(thisArg[, arg1[, arg2[, ...]]])()

• 然后bind函數(shù)創(chuàng)建的是一個(gè)新的函數(shù)，需要手動(dòng)去調(diào)用

• 這個(gè)新函數(shù)的 this 被指定為 bind() 的第一個(gè)參數(shù)，而其余參數(shù)將作為新函數(shù)的參數(shù)，供調(diào)用時(shí)使用

讀到這里，這篇“javascript的this指向怎么理解”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：javascript的this指向怎么理解
標(biāo)題鏈接：http://muchs.cn/article48/pisshp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、外貿(mào)建站、企業(yè)建站、、網(wǎng)站導(dǎo)航、響應(yīng)式網(wǎng)站

廣告

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