1.1關于this的介紹
在js開發(fā)中this的使用頻率很高盐碱，而且面試過程中也會碰到關于this的相關題目鬼癣。因此有必要對this的使用方法進行總結一下。
1.2關于this的定義
this 為JavaScript的關鍵字 表示“當前” 指的調用函數(shù)的那個對象。
1.3關于this的使用情況
(1) 在jquery里面的使用場景 this表示當前節(jié)點對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>關鍵字this</title>
</head>
<body>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<script src="./js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul li").click(function(){
$(this).css("color","red");//this表示當前節(jié)點對象
});
});
</script>
</body>
</html>
(2) 在普通函數(shù)的使用場景一
<script type="text/javascript">
window.onload=function(){
var x=1;
function fun(){
this.x;
}
console.log(x); // 輸出 1 這里的this表示 全局的情況
}
</script>
(3) 在普通函數(shù)的使用場景二
<script type="text/javascript">
window.onload=function(){
var x=1;
function fun(){
this.x=2;
}
console.log(x); //輸出 1
//可能想不明白為什么這里還是會輸出1沟蔑，函數(shù)fun里面對x的值重新定義后，但fun并沒有被調用狱杰，所以這里輸出的結果仍然為 1
}
</script>
(4) 在普通函數(shù)的使用場景三
<script type="text/javascript">
window.onload=function(){
var x=1;
function fun(){
console.log(this); //這里的this指向window對象
this.x=2;
}
fun();//函數(shù)執(zhí)行 x的值變?yōu)?
console.log(x); //這里輸出 2
}
</script>
(5) 在普通函數(shù)的使用場景四
window.onload=function(){
//沒有被綁定的對象 默認this指向window對象
var x=1;
function f1(){
this.x=2;
}
function f2(){
this.x=3;
}
f2();
f1();
console.log(x); // 輸出 2
}
</script>
(6) 在對象里面的使用
<script type="text/javascript">
window.onload=function(){
var fun=function(){
console.log(this);//對象中引用 指向當前綁定的對象
};
var obj={};
obj.name='sonia';
obj.action=fun;
obj.action(); // 返回顯示 object對象 {name:"sonia",action:fun}
}
</script>
那么我們把上面的代碼再改一下 又會發(fā)生意外的情況：
<script type="text/javascript">
window.onload=function(){
var fun=function(){
console.log(this);//當前綁定的對象
};
var obj={};
obj.name='sonia';
o.action=fun;
fun();// 調用這個fun函數(shù) 這時this就指向了window對象
}
</script>
(7) 在構造函數(shù)里面的使用
//在構造函數(shù)里面的this指向當前new的對象實例
function Fun(name,age){
this.name=name;
this.age=age;
}
var fun=new Fun("123",20)
console.log(fun.name);//123
// 要注意這種情況
function Fun(name,age){
this.name=name;
this.age=age;
}
var fun=new Fun("123",20);
fun.name='abc'; //這里對name已經(jīng)重新賦值
console.log(fun.name);//abc 就近原則 先從最近的地方尋找值 如果沒有 會繼續(xù)往上查找對應的值
(8) 使用apply的情況
var name='123';
function f(){
return this.name;
};
var o={};
o.name='sonia';
o.action=f;
//o.action();//sonia
console.log(o.action.apply()); // 這里 輸出 123
//在apply()里面沒有傳入任何參數(shù) 默認就是 window ; 但如果apply() 傳入了值（對象）
那么就會找到對象里面的值
var name='123';
function f(){
return this.name;
};
var o={};
o.name='sonia';
o.action=f;
console.log(o.action.apply(o)); //輸出 sonia
(9) 使用call()的情況 此時this代表指定的對象
var obj={name:'sonia'};
function funOne(){
console.log(this);
}
function funTwo(){
this.name='123';
}
funOne.call(obj); // 輸出 {name: "sonia"} 代表obj
funOne.call(funTwo); //輸出funTwo這個函數(shù)對象
(10) 在事件處理函數(shù)中 this 指向誰的事件作用元素
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function(){
console.log(this);// 輸出的是button標簽
}
那么我們再改一下上面的代碼 如下所示：
function fun(){
console.log(this);
}
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function(){
console.log(this); //這里的this指向事件作用元素
fun();//直接調用函數(shù)時 this指向window
}
1.4關于this的一道面試題
var number=1;
var obj={
number:2,
showNumber:function(){
this.number=3;
(function(){
console.log(this.number);
})(); //這里是匿名函數(shù)自我調用 在這里的this指向了 window
console.log(this.number);
}
};
obj.showNumber();
所以最終輸出的結果為: 1 3
