JS this指向

首先,請(qǐng)牢記以下三點(diǎn)
1. this指向的,只可能是對(duì)象!
2.this指向誰(shuí),不取決于this寫(xiě)在哪!而是取決于函數(shù)在哪里進(jìn)行調(diào)用。
3.this指向的對(duì)象,稱(chēng)之為函數(shù)的上下文context,也叫函數(shù)的調(diào)用者。
看一下具體的情況

1.通過(guò)函數(shù)名直接調(diào)用:this指向window

function funA(){
    console.log(this);
 }
 // 通過(guò)函數(shù)名直接調(diào)用:this指向window
funA(); // this--->window
通過(guò)函數(shù)名直接調(diào)用

2.函數(shù)作為某個(gè)數(shù)組中的一個(gè)元素,通過(guò)數(shù)組下標(biāo)進(jìn)行調(diào)用:this指向這個(gè)數(shù)組,以上面的函數(shù)為例。

function funA(){
    console.log(this);
 }
var arr = [funA,1,2,3];
arr[0]();  // this--->arr
通過(guò)數(shù)組下標(biāo)進(jìn)行調(diào)用

3.通過(guò)對(duì)象.函數(shù)名調(diào)用的:this指向這個(gè)對(duì)象

function funA() {
   console.log(this)
}
var obj = {
   name: "obj",
   funA: funA
};
obj.funA(); // this--->obj
通過(guò)對(duì)象進(jìn)行調(diào)用

4.通過(guò)DOM事件進(jìn)行的調(diào)用,this指向頁(yè)面中調(diào)用它的元素

假設(shè)頁(yè)面中有一個(gè)id為div的元素

var div = document.getElementById('div')
div.onclick = function () {
    console.log(this)
}
事件進(jìn)行的調(diào)用

5.函數(shù)作為window內(nèi)置函數(shù)的回調(diào)函數(shù)調(diào)用:this指向window( 如setInterval setTimeout 等)

function funA() {
    console.log(this)
}
setTimeout(funA,1000);// this--->window
回調(diào)函數(shù)調(diào)用

6.函數(shù)作為構(gòu)造函數(shù),用new關(guān)鍵字調(diào)用時(shí):this指向新new出的函數(shù)。

function funA() {
    this.name = 'funA'
    console.log(this.name)
 }
var obj = {
    name:'name',
    fun:new funA(),
}
console.log(obj)
new關(guān)鍵字

上面是本人對(duì)于this指向的一些理解,如有錯(cuò)誤或不足,望指出。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • var 作用域 先來(lái)看個(gè)簡(jiǎn)單的例子: 直覺(jué)地,內(nèi)部函數(shù)可以訪(fǎng)問(wèn)外部函數(shù)的變量,外部不能訪(fǎng)問(wèn)內(nèi)部函數(shù)的變量。上面的例...
    我講你思閱讀 325評(píng)論 0 1
  • this:指的是你的函數(shù)執(zhí)行時(shí)所在的環(huán)境(作用域) 函數(shù)this的指向(箭頭函數(shù)除外): 誰(shuí)調(diào)用函數(shù),這個(gè)this...
    Gino_Li閱讀 1,599評(píng)論 0 1
  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,791評(píng)論 0 3
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁(yè)的形式展示給用戶(hù)的,因此網(wǎng)頁(yè)是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁(yè)文件是用...
    阿啊阿吖丁閱讀 4,908評(píng)論 0 0
  • this指向調(diào)用該函數(shù)的對(duì)象 在函數(shù)中this到底取何值,是在函數(shù)真正被調(diào)用執(zhí)行的時(shí)候確定的,函數(shù)定義的時(shí)候確定不...
    神話(huà)降臨閱讀 249評(píng)論 0 3

友情鏈接更多精彩內(nèi)容