js中call和apply的區別
摘要：
呼叫函式時, call和apply傳遞引數的方式不同
以名為showHide的函式為例:
function showHide(name1, name2){
if(this.parentNode.parentNode.querySelector("table...
呼叫函式時, call和apply傳遞引數的方式不同
- 以名為showHide的函式為例:
function showHide(name1, name2){
if(this.parentNode.parentNode.querySelector("table").style.display === "table"){
this.parentNode.parentNode.querySelector("table").style.display = "none";
this.querySelector("span").innerHTML = "(點選展開)";
}else{
this.parentNode.parentNode.querySelector("table").style.display = "table";
this.querySelector("span").innerHTML = "(點選摺疊)"+name1+","+name2;
}
}
showHide.call(this, '桐人', '亞絲娜') showHide.apply(this, ['上條', '御阪'])
用call和apply實現相同的摺疊的Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>摺疊表格的Demo</title>
</head>
<body>
<script>
function showHide(name1, name2){
if(this.parentNode.parentNode.querySelector("table").style.display === "table"){
this.parentNode.parentNode.querySelector("table").style.display = "none";
this.querySelector("span").innerHTML = "(點選展開)";
}else{
this.parentNode.parentNode.querySelector("table").style.display = "table";
this.querySelector("span").innerHTML = "(點選摺疊)"+name1+","+name2;
}
}
</script>
<style>
.title{
font-size: 50px;
color: #333333;
}
table img{
width: 600px;
}
table {
font-size: 20px;
}
table tr td{
border: 1px solid #333333;
}
</style>
<div>
<div class="title"><p onclick="showHide.call(this, '桐人', '亞絲娜')" style="user-select: none">刀劍神域<span style="width: 30px;height: 30px; font-weight: bold;">(點選展開)</span></p></div>
<table style="display:none;">
<tr>
<td><img src="./image/daojian.jpg"></td>
<td style="width: 800px">2022年，電子機械製造商“ARGUS”開發“NERvGear”裝戴在頭上的機器，能夠控制人類的腦神經連線虛擬世界，於是人類終於實現了完全的虛擬實境。
身為VRMMORPG（虛擬大規模線上角色扮演遊戲）《刀劍神域〈SAO〉》中的其中一名玩家：桐人和其他一萬個玩家才剛登入享受此遊戲之時，遊戲中的管理員對大家宣佈了一個令人驚恐的訊息──
那就是，現在唯一要登出此遊戲的方法只有將這個遊戲破關，並且在這個遊戲中GAME OVER的話，也就代表了現實世界中的“死亡”。
桐人只能在這混亂的情況下，比其他玩家更早一步接受這個事實，投入了看不見終點的戰鬥之中……</td>
</tr>
</table>
</div>
<div>
<div class="title"><p onclick="showHide.apply(this, ['上條', '御阪'])" style="user-select: none">魔法禁書目錄<span style="width: 30px;height: 30px; font-weight: bold;">(點選展開)</span></p></div>
<table style="display:none;">
<tr>
<td><img src="./image/jinshu.jpg"></td>
<td style="width: 800px">故事講述的是從東京都西部被分割出來的這座都市中，“超能力開發”被列為學校課程的一部分（學生作為人體科學實驗物件）。在二百三十萬人口中，有八成都是學生，所以被稱為學園都市。他們每天都在超能力開發上進行相互競爭。根據能力高低不同，可以分為6級，從無能力（level 0）到超能力（level 5）。故事的主角上條當麻是學園裡的一個無能力者，但並非完全沒有能力，他的能力是能夠將一切異能之力無效化。他只有右手能夠使用這種能力，還給自己的這種連上帝的奇蹟都能抹殺的能力取名為“幻想殺手”。而正因為他的右手似乎把神的祝福都給抹殺掉的緣故，導致自己一直過著不幸的生活。某一個暑假的日子，在家裡的陽臺上，他遇見了一位修女；這位少女自稱自己的名字叫“茵蒂克絲”，並是從魔法的世界逃了出來，現在正在被魔法師追趕中。就這樣，掌握了十萬三千本究極魔法書的少女與擁有抹殺一切奇蹟的神上之手的少年，將面臨一系列故事……</td>
</tr>
</table>
</div>
</body>
</html>
小結:
使用call和apply呼叫函式時, 往往需要傳遞一個this, 目的是確定被呼叫函式 showHide 執行時函式內部 this 的指向, 以上面的demo為例, 如果呼叫函式 showHide 時, 第一個引數沒有傳遞 this ,那呼叫函式的主體就變成了 document ,而不是綁定了onclick的 <p></p> 節點, 這點需要關注