iT邦幫忙

0

this當參數的差別

我是剛入門的新手
我知道this的判定主要是看被誰調用
下面這段code當this被當成參數時會成功改變背景顏色
但是當在函式直接把elmnt改成this時卻失敗
想請問之間的差異
謝謝

ps.我自己的想法是在函數裡直接寫this,被觸發調用時就會以該物件為this,所以在函數裡直接用this不需要用參數帶入即可,不過卻失敗了

<button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button>
<button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button>
<button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button>
<button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button>

function openCity(cityName,elmnt,color) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].style.backgroundColor = "";
    }
    document.getElementById(cityName).style.display = "block";
    elmnt.style.backgroundColor = color;
    /*改成以下方式背景顏色不會改變
    this.style.backgroundColor = color;
    */

}
document.getElementById("defaultOpen").click();
weiclin iT邦高手 4 級 ‧ 2017-08-15 13:51:32 檢舉
你可以在函式裡用 console.log(this) 跟 console.log(elmnt) 看看這兩個是啥
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

2
fillano
iT邦超人 1 級 ‧ 2017-08-15 14:25:06

在html裡面用onclick來綁事件,其實在做的事情跟以下Javascript是同義的:

element.onclick = function() {
    openCity('London', this, 'red');
}

實際上你是在綁定在element的函數裡面呼叫openCity,但是openCity並沒有綁定,所以他的this跟element沒關係。

Rafiki iT邦新手 5 級 ‧ 2017-08-15 17:01:12 檢舉

了解,所以該元素是跟事件函數綁定
所以回呼函數裡的this是global
透過參數傳入的話可以藉此綁定提供參數的元素

我要發表回答

立即登入回答