---
type: slide
---

# this 用法大不同
###### tags:`HyUI4.0`

---

JQ很常使用 $(this) / this 來抓取當下的物件

<button type="button">button</button>

$('button').on('click',function(){
    $(this).addClass('active')
})

使用 console.log 來看

// $(this) 會是一個 JQ物件，這邊可以看到button
jQuery.fn.init[button]

---

而JS裡面的 this ，以上面的例子

let btn = document.querySelector('button');
btn.addEventListener('click', function () {
  console.log(this);
});

使用 console.log 來看

<button type="button">button</button>

---

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

以這個html結構，如果希望去針對每一個li執行某個function時，JQ可能會這樣寫

$('li').each(function(index, item){
    $(this).html(index);
})

---

遍歷每個 li 並把 index 值帶進 li 裡面

<ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
</ul>

---

換JS的情況

let li = document.querySelectorAll('li');
li.forEach((item, index) => {
  this.innerHTML = index;
});

---

會發現完全沒有反應

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

再次使用 console.log 來看 this 發現這個 this 指向到 ｗindow

Window {window: Window, self: Window, document: document, name: '', location: Location, …}

---

<span style="font-size:36px">this的使用時機</span>
<ul style="text-align:left">
<li>全域：不要用</li>
<li>作為物件：函式內的 this 是指向函式前方的物件</li>
<li>箭頭函式：箭頭函式沒有自己的 this(看情況用)</li>
<li>new 建構子：新建立的物件傳入函式作為 this</li>
<br/>
this指向在於如何呼叫他

</ul>

---

所以使用上其實不一樣，不夠理解 this 的情況下使用要非常小心

可以看下面兩篇來增加 JS 的 this 知識
[鐵人賽：JavaScript 的 this 到底是誰？](https://www.casper.tw/javascript/2017/12/12/javascript-this/)
[淺談 JavaScript 頭號難題 this：絕對不完整，但保證好懂](https://blog.techbridge.cc/2019/02/23/javascript-this/)

<style>
.reveal h1{
font-size:2em;
}
.reveal h1,.reveal h2 {
color:#c9f2ff;
}
</style>