與其它語言相比,js的this關鍵字的指向稍微有點差別。
一、全域性環境
首選我們要明確一點,在全域性環境中(在任意函式體外部),無論是嚴格模式還是非嚴格模式,this都指向window。下面,我們來通過幾個例子理解一下。
二、函式環境//示例1
console.
log(
this
)//這裡的this在全域性域下,指向window
//示例二
var a =10;
var obj =
console.
log(obj.b)
//返回10
函式在未執行時,函式內部this指向undefined,函式被呼叫後,this指向取決於被呼叫的方式。同樣的我們來通過幾個例子來理解一下。
以上是我們常見的函式執行時的this 問題,當然除了以上這些基本問題之外,還會遇到立即執行函式,箭頭函式,事件處理函式,建構函式的this指向問題,下面來介紹一下這些函式中的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
1.立即執行函式中的this
立即執行函式中的this指向全域性,也不難理解,立即執行函式在定義時即被執行,相當於在window下執行該函式。`
2.箭頭函式var num =3;
var obj =)(
)}
箭頭函式的this指向和其上一層作用域的this指向一致。
3.在事件處理函式中,哪個元素觸發事件,this就指向哪個元素var name =
'sun'
;var obj =
, fun:
function()
};obj.
say();
//say是箭頭處理函式,this和上一層環境一致,上一層是全域性環境,this指向window,所以列印sun
obj.
fun();
//fun是普通函式,誰呼叫指向誰,所以this指向obj,列印cat
4.建構函式//獲取 id = btn 的標籤
var btn = document.
getelementbyid
('btn');
//在事件處理函式中,哪個元素觸發事件,this指向哪個元素
btn.
onclick
=function()
在正常的建構函式中,建構函式中的this指向例項化物件。
function
person()
var person1 =
newperson()
console.
log(person1)
// person
當然,我們也可以手動破壞建構函式,當在建構函式中返回陣列,物件,函式時,建構函式的this指向將會指向返回的陣列,函式,函式。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
//正常環境
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...