JavaScript void 運算子

admin發表於2018-10-30
JavaScript

void運算子可以執行右側的表示式，返回值始終為undefined。

利用此運算子可以很便利的完成一些小操作，比如最為常見的取消連結跳轉動作。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
void expression

引數解析：

（1）.expression：一個表示式，執行此表示式。

特別說明：即便表示式有返回值，但是此運算子的返回值始終是undefined。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
console.log(void function(){
  console.log("螞蟻部落");
  return 5;
}())

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/30/151840s7n1kbth97t9j5hk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

void右側是一個匿名自執行函式，返回值是5。

但是最終的返回值依然是undefined。

關於匿名函式相關內容可以參閱JavaScript 匿名函式一章節。

再來看一段最為常見的用法：

[HTML] 純文字檢視 複製程式碼
<a href="javascript:void(0);">螞蟻部</a>

上述程式碼大家一定都不會陌生，點選它可以阻止連結的跳轉動作。

用法非常簡單，但是很多朋友並不太清楚其中的原理，下面分步進行一下介紹。

（1）."JavaScript:"是一個協議，當觸發元素時，會執行它後面的程式碼。

（2）.如果協議後面程式碼返回undefined，則阻止元素的預設行為，比如點選連結，頁面跳轉就是預設行為。

（3）.如果協議後面沒有任何程式碼，相當於返回值為undefined，阻止元素的預設行為。

（4）.如果協議後面有程式碼，那麼將執行程式碼，用執行的程式碼替換頁面中的內容，可能在不同的瀏覽器有所差別，比如<a href="javascript:0;">螞蟻部落</a>，在谷歌瀏覽器中沒有任何動作，在火狐瀏覽器中會將頁面內容替換為0，其他瀏覽器效果大家自行測試。再來看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style>
#ant{
  width:100px;
  height:100px;
  background-color:#ccc;
}
</style>    
</head> 
<body> 
<div id="ant"></div>
<a href="JavaScript:void(ant.style.backgroundColor='green');">檢視效果</a>
</div>
</body> 
</html>

點選連結會執行協議後面的程式碼，將div的背景顏色設定為綠色。

總結兩點：

（1）.id由於是唯一的，所以可以直接作為物件使用。

（2）.儘管使用上述協議可以實現JavaScript程式碼的執行，但是並不推薦使用此協議。

推薦為連結繫結事件處理函式，程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style>
#ant{
  width:100px;
  height:100px;
  background-color:#ccc;
}
</style>  
<script>
window.onload=function(){
  bt.onclick=function(){
    ant.style.backgroundColor='green';
  }
}
</script>    
</head> 
<body> 
<div id="ant"></div>
<a href="JavaScript:void(0)" id="bt">檢視效果</a>
</div>
</body> 
</html>

推薦使用上述方式來來設定div元素的背景顏色。

更多註冊事件處理函式方式可以參閱JavaScript 註冊事件處理函式一章節。

相關文章