JS中this指向問題

與其它語言相比，js的this關鍵字的指向稍微有點差別。

一、全域性環境

首選我們要明確一點，在全域性環境中（在任意函式體外部），無論是嚴格模式還是非嚴格模式，this都指向window。下面，我們來通過幾個例子理解一下。

//示例1
console.
log(
this
)//這裡的this在全域性域下，指向window
//示例二
var a =10;
var obj =
console.
log(obj.b)
//返回10

二、函式環境

函式在未執行時，函式內部this指向undefined，函式被呼叫後，this指向取決於被呼叫的方式。同樣的我們來通過幾個例子來理解一下。

// 示例一
var a =10;
function
fun1()
fun2()
;//這相當於 window.fun2() 在window 中呼叫fun1，this 指向window
}fun1()
;//這相當於 window.fun1() 在window 中呼叫fun1，this 指向window
//示例二
var b =10;
var obj =},
c :}}
obj.
fun1()
//在obj 中呼叫fun1，this 指向obj 所以會列印 12
obj.c.
fun2()
//在c 中呼叫fun2，this 指向c 所以會列印 14
var res1 = obj.fun1 //將fun1賦給res1
res1()
//這相當於 window.fun1() 在window 中呼叫fun1，this 指向window,所以列印10
var res2 = obj.
fun1()
//執行fun1中列印12，然後將fun1函式執行的返回值賦給res2，也就是將fun的函式體賦給res2
res2()
//這相當於 window.fun() 在window 中呼叫fun，this 指向window,所以列印10

以上是我們常見的函式執行時的this 問題，當然除了以上這些基本問題之外，還會遇到立即執行函式，箭頭函式，事件處理函式，建構函式的this指向問題，下面來介紹一下這些函式中的this指向問題。

1.立即執行函式中的this

立即執行函式中的this指向全域性，也不難理解，立即執行函式在定義時即被執行，相當於在window下執行該函式。`

var num =3;
var obj =)(
)}

2.箭頭函式

箭頭函式的this指向和其上一層作用域的this指向一致。

var name =
'sun'
;var obj =
, fun:
function()
};obj.
say();
//say是箭頭處理函式，this和上一層環境一致，上一層是全域性環境，this指向window,所以列印sun
obj.
fun();
//fun是普通函式，誰呼叫指向誰，所以this指向obj,列印cat

3.在事件處理函式中，哪個元素觸發事件，this就指向哪個元素

//獲取 id = btn 的標籤
var btn = document.
getelementbyid
('btn');
//在事件處理函式中，哪個元素觸發事件，this指向哪個元素
btn.
onclick
=function()

4.建構函式

在正常的建構函式中，建構函式中的this指向例項化物件。

function
person()
var person1 =
newperson()
console.
log(person1)
// person

function
person()
var person1 =
newperson()
//這裡的建構函式中的this指向person1
console.
log(person1)
// person 
person1.hobby =
'game'
//給person1新增屬性，不影響原建構函式
console.
log(person1)
// person 
var person2 =
newperson()
//這裡的建構函式中的this指向person1
console.
log(person2)
// person

當然，我們也可以手動破壞建構函式，當在建構函式中返回陣列，物件，函式時，建構函式的this指向將會指向返回的陣列，函式，函式。

//正常環境
function
person()
var person =
newperson()
; console.
log(person.name)
//列印cat
//返回陣列
function
person()
var person =
newperson()
; console.
log(person)
//列印 
console.
log(person.name)
//列印undefined
//返回物件
function
person()
}var person =
newperson()
; console.
log(person)
//列印 {}
console.
log(person.name)
//列印undefined
//返回函式
function
person()
}var person =
newperson()
; console.
log(person)
//列印 ƒ fun(){}
console.
log(person.name)
//列印undefined

var obj1 =
}var obj2 =
} obj1.
say(
)// 函式的普通呼叫，誰呼叫this 指向誰，所以列印cat
obj1.say.
call
(obj2)
//call強制改變obj1中this指向，並且規定指向obj2,所以列印sun
obj1.say.
(obj2)
var res = obj1.say.
bind
(obj2)
//bind強制改變obj1中this指向，並且規定指向obj2,同時返回say函式體
res(
)//即使res是在全域性環境呼叫，但是this依舊指向obj2,列印sun

JS中this指向問題

解析器在呼叫函式時,每次都會向函式內部傳遞進乙個隱含的引數,這個隱含的引數就是this,this指向的是乙個物件,這個物件我們稱之為函式執行的上下文物件,根據函式的呼叫方式不同,this會指向不同的物件.簡單來說一下函式中this指向問題,1.this是什麼?任何函式本質上都是通過某個物件來呼叫的,...

JS中this指向問題

函式內部的this之和函式的呼叫方式有關，和函式的定義方式沒有關係functionfn fn windowvar obj obj.fn obj functionfn 或者可以這樣寫自呼叫函式 functionfn div document.queryselector div div.onclick ...

js中this指向問題

一發現很多人面試的是都都會被問到函式中this指向的問題，今天咱們就來好好捋一捋這個問題，函式中this指向，以及es6箭頭函式this指向的問題咱們先來看下面乙個例子 window.color red var a function fun fun red a.fun fun a.fun blu...

JS中this指向問題

JS中this指向問題

JS中this指向問題

js中this指向問題

相關推薦