淺談this指向問題
剛開始學習js,被this弄得暈頭轉向,回過頭來也想總結一下希望能幫助正被this‘折磨’的人
我們先來看看直接執行this的情況
alert(this);//指向的是window
函數中執行
function foo(){
alert(this);
}
foo();//window
把函數賦值給變量執行
var foo = function(){
alert(foo);
}
foo();//window
上面直接執行的例子指向的都是window為什麽會這樣呢？
如果看過前面的學習總結一定知道,window是全局變量的對象,其實alert就是window的屬性我們可以寫成這樣:
window.alert(this)
函數的例子也可以寫成這樣
function foo(){
alert(this);
}
window.foo();//window
當你看到foo()這種‘xxx()’的調用方式,那它就是指向的window,這對你理解是有幫助的
回過頭來看一下this:this指的就是調用 當前 方法（函數）的那個對象
我們再來看一個例子
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js-this指向</title>
<script>
function
但我們這樣寫的話
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js-this指向</title>
<script>
function
答案是:window ==》當你看到foo()這種‘xxx()’的調用方式,那它就是指向的window,這對你理解是有幫助的
我們進入實戰演練一<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsthis指向</title>
</head>
<body>
<input type="button" value="按扭1">
<input type="button" value="按扭2">
<input type="button" value="按扭3">
<script>
window.onload=function(){
var aLi = document.getElementsByTagName("input");
for(var i = 0;i<aLi.length;i++){
aLi[i].onmouseover = foo;
}
}
function foo(){
this.style.background = "red";
}
</script>
</body>
</html>
小夥伴們我們在修改一下
<html lang=""> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jsthis指向</title> </head> <body> <input type="button" value="按扭1"> <input type="button" value="按扭2"> <input type="button" value="按扭3"> <script> window.onload=function(){var aLi = document.getElementsByTagName("input"); for(var i = 0;i<aLi.length;i++){ aLi[i].onmouseover =function(){ foo(); }; } } function foo(){ this.style.background = "red"; } </script> </body> </html>
這樣做會報錯,因為foo()函數this指向的是window而不是aLi的元素
我們通過將this賦值給一個變量就可以解決這個問題
<html lang=""> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jsthis指向</title> </head> <body> <input type="button" value="按扭1"> <input type="button" value="按扭2"> <input type="button" value="按扭3"> <script> window.onload=function(){ var aLi = document.getElementsByTagName("input"); for(var i = 0;i<aLi.length;i++){ aLi[i].onmouseover =function(){ that = this; foo(); }; } } function foo(){ that.style.background = "red"; } </script> </body> </html>
這樣我們就解決了關於this指向的問題。
希望對你理解this的指向有個重新的認識
謝謝閱讀
（完
淺談this指向問題