---
# System prepended metadata

title: this 用法大不同
tags: [HyUI4.0]

---

---
type: slide
---

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

---

JQ很常使用 $(this) / this 來抓取當下的物件
```htmlembedded=
<button type="button">button</button>
```
```javascript=
$('button').on('click',function(){
    $(this).addClass('active')
})
```
使用 console.log 來看 
```javascript=
// $(this) 會是一個 JQ物件，這邊可以看到button
jQuery.fn.init[button]
```

---

而JS裡面的 this ，以上面的例子
```javascript=
let btn = document.querySelector('button');
btn.addEventListener('click', function () {
  console.log(this);
});
```
使用 console.log 來看
```javascript=
<button type="button">button</button>
```

---

```htmlembedded=
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
```
以這個html結構，如果希望去針對每一個li執行某個function時，JQ可能會這樣寫
```javascript=
$('li').each(function(index, item){
    $(this).html(index);
})
```

---

遍歷每個 li 並把 index 值帶進 li 裡面
```htmlembedded=
<ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
</ul>
```

---

換JS的情況
```javascript=
let li = document.querySelectorAll('li');
li.forEach((item, index) => {
  this.innerHTML = index;
});
```

---

會發現完全沒有反應
```htmlembedded=
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
```
再次使用 console.log 來看 this 發現這個 this 指向到 ｗindow

```javascript=
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>
