快捷導(dǎo)航

再次談?wù)揓avascript中的this

更新時(shí)間：2016年06月23日 14:23:40 作者：幕三少

javascript中的this應(yīng)用非常廣泛，對(duì)js中this總是似是而非的感覺，今天小編豁然開朗，然后再次給大家談?wù)搄s中的this關(guān)鍵，感興趣的朋友跟著小編一起看看吧

　一直對(duì)Javascript中的this都有一種似是而非的感覺，今天突然感覺豁然開朗，特此記錄一下。

咱們先看個(gè)栗子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this的使用</title>
<script type="text/javascript">
var Car,tesla;
Car=function () {
this.start=function(){
console.log('car started');
};
this.turnKye=function () {
var carKey=document.getElementById('car_key');
carKey.onclick=function () {
this.start(); 
};
}
return this;
}
tesla=new Car();
tesla.turnKye();
</script>
</head>
<body>
<input type="button" id="car_key" value="test" />
</body>
</html>

咋一看這段代碼沒有什么問題，但是由于對(duì)于this的錯(cuò)誤理解最終導(dǎo)致錯(cuò)誤的結(jié)果。我們?cè)谠豤ar_key上面綁定了click事件，認(rèn)為在car的類中嵌套綁定click事件就可以讓這個(gè)dom元素訪問car的this上下文。這種方式看起來很合理，但是不幸的是它并不工作。

在Javascript中，this關(guān)鍵字總是指向正執(zhí)行的作用域的所有者。

　　請(qǐng)大家仔細(xì)揣摩上面那句話。正如我們所知，函數(shù)調(diào)用會(huì)產(chǎn)生新的作用域，一點(diǎn)onclick事件被觸發(fā)，this就指向了dom元素而不是Car的類。

　　那我們?cè)趺醋霾艜?huì)讓它能正常工作呢？我們通常會(huì)把this賦值給一個(gè)局部的自由變量(比如that,_this,self,me等，這個(gè)在許多的框架里面都有體現(xiàn)）來避開作用域帶來的問題。這里使用局部變量來重寫之前的方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this的使用</title>
</head>
<body>
<input type="button" id="car_key" value="test" />
<script type="text/javascript">
var Car,tesla;
Car=function () {
this.start=function(){
console.log('car started');
};
this.turnKye=function () {
var that=this;
var carKey=document.getElementById('car_key');
carKey.onclick=function () {
that.start(); 
};
}
return this;
}
tesla=new Car();
tesla.turnKye();
</script>
</body>
</html>

　　由于that是一個(gè)自由變量，onclick事件的出發(fā)并不會(huì)引起它的重新定義。

　如果你熟悉ES6的話可以使用胖箭頭符號(hào)，這更簡(jiǎn)潔和更容易理解，如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this的使用</title>
</head>
<body>
<input type="button" id="car_key" value="test" />
<script type="text/javascript">
var Car,tesla;
Car=function () {
this.start=function(){
console.log('car started');
};
this.turnKye=function () {
//var that=this;
var carKey=document.getElementById('car_key');
//carKey.onclick=function () {
// that.start(); 
//};
carKey.onclick=()=>this.start();
}
return this;
}
tesla=new Car();
tesla.turnKye();
</script>
</body>
</html>

當(dāng)然我們也可以使用綁定函數(shù)的方法來解決這個(gè)問題：如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this的使用</title>
</head>
<body>
<input type="button" id="car_key" value="test" />
<script type="text/javascript">
var Car,tesla;
Car=function () {
this.start=function(){
console.log('car started');
};
var click=function(){
this.start(); 
}
this.turnKye=function () {
//var that=this;
var carKey=document.getElementById('car_key');
carKey.onclick=click.bind(this);
}
return this;
}
tesla=new Car();
tesla.turnKye();
</script>
</body>
</html>

其實(shí)這些在學(xué)習(xí)React的時(shí)候，綁定事件的時(shí)候遇到的坑，那時(shí)候只知道這么寫，不知道怎么回事，今天突然感覺豁然開朗。希望對(duì)大家有所幫助。

您可能感興趣的文章: