再次談論Javascript中的this
一直對Javascript中的this都有一種似是而非的感覺，今天突然感覺豁然開朗，特此記錄一下。
咱們先看個栗子：
<!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>
咋一看這段代碼沒有什么問題，但是由于對于this的錯誤理解最終導致錯誤的結(jié)果。我們在元素car_key上面綁定了click事件，認為在car的類中嵌套綁定click事件就可以讓這個dom元素訪問car的this上下文。這種方式看起來很合理，但是不幸的是它并不工作。
在Javascript中，this關鍵字總是指向正執(zhí)行的作用域的所有者。
請大家仔細揣摩上面那句話。正如我們所知，函數(shù)調(diào)用會產(chǎn)生新的作用域，一點onclick事件被觸發(fā)，this就指向了dom元素而不是Car的類。
那我們怎么做才會讓它能正常工作呢？我們通常會把this賦值給一個局部的自由變量(比如that,_this,self,me等，這個在許多的框架里面都有體現(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是一個自由變量，onclick事件的出發(fā)并不會引起它的重新定義。
如果你熟悉ES6的話可以使用胖箭頭符號，這更簡潔和更容易理解，如下：
<!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>
當然我們也可以使用綁定函數(shù)的方法來解決這個問題：如下
<!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>
其實這些在學習React的時候，綁定事件的時候遇到的坑，那時候只知道這么寫，不知道怎么回事，今天突然感覺豁然開朗。希望對大家有所幫助。
相關文章
這篇文章主要介紹了學習RxJS之JavaScript框架Cycle.js ,它是一個極簡的JavaScript框架（核心部分加上注釋125行），提供了一種函數(shù)式，響應式的人機交互接口,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了JavaScript數(shù)組常用方法的相關資料,非常的詳細，需要的朋友可以參考下2015-03-03
這篇文章主要介紹了介紹了多種避免他人調(diào)試前端代碼的方法,包括通過不斷使用debugger語句、將代碼寫在一行、檢測瀏覽器窗口尺寸變化、使用定時器執(zhí)行debugger語句、使用第三方插件disable-devtooldisable-devtool、禁止F12/審查開啟控制臺等,需要的朋友可以參考下2025-01-01
js中AppendChild與insertBefore的用法詳細解析
這篇文章主要是對js中AppendChild與insertBefore的用法進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
深入認識JavaScript中的函數(shù)...2007-01-01
動態(tài)生成js類的實現(xiàn)方法...2007-03-03
javascript實現(xiàn)多欄閉合展開式廣告位菜單效果實例
這篇文章主要介紹了javascript實現(xiàn)多欄閉合展開式廣告位菜單效果,可實現(xiàn)類似手風琴切換展示效果的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
Js 利用正則表達式和replace函數(shù)獲取string中所有被匹配到的文本(推薦)
這篇文章主要介紹了Js 利用正則表達式和replace函數(shù)獲取string中所有被匹配到的文本，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-10-10
學習javascript的閉包,原型,和匿名函數(shù)之旅
Javascript中有幾個非常重要的語言特性——對象、原型繼承、閉包。其中閉包 對于那些使用傳統(tǒng)靜態(tài)語言C/C++的程序員來說是一個新的語言特性，本文給大家介紹js的閉包,原型,和匿名函數(shù)之旅，感興趣的朋友一起學習吧2015-10-10
這篇文章主要為大家詳細介紹了JavaScript代碼實現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04