# <font class="h2">什麼是this</font>

###### tags: `javascript`
<style>
.h2 {
background: linear-gradient(135deg,#fff,#537479) ;
color: #537479;
display:block;
padding: 6px 5px;
border-radius: 4px;
}
.h3 {
background: linear-gradient(180deg,#fff 50%,#c9d5d4) ;
color: #537479;
display:block;
padding: 6px 5px;
border-bottom: 3px solid #537479;
}
.h4 {
color: #537479;
font-weight:bold;
font-size:1.1em;
}
</style>

- this 是javascript的一個關鍵字
- this 是function執行時，自動生成的一個內部物件

<br>

:::danger
this的指向主要是看函式在哪裡被執行
:::
:::info
this 為當前 function 執行所在位置的參考
:::

:::info
每個函式都有this和argument這兩個特別的值，
this代表「函式執行時所屬的物件」，在函式使用它
:::

### <font class="h3">不同的程式碼脈絡，this代表不同的東西</font>
### <font class="h4">➤情況一: 獨立的函式</font>
==獨立函式中this代表全域(window物件)==

function test(){
    console.log(this);
}
test();

<br>

### 因此在獨立的函式，this可以做window使用:

function test(){
    console.log(this.innerWidth);//印出視窗寬度
}
test();

因此得知視窗寬度為1425px

<br><br>

### <font class="h4">➤情況二:物件的方法(方法指的就是物件裡的函式)</font>
==在物件的方法中，this就是方法所屬的物件本身==

let obj ={
    x:3,
    test:function(){
        console.log(this);
    }
}
obj.test();

就是obj物件本身
<br>

### 因此在物件的方法，this可以做此物件使用，取裡面屬性的值:

let obj ={
    x:3,
    test:function(){
        console.log(this.x);
    }
}
obj.test();


<br><br>

### <font class="h4">➤情況三:事件處理函式</font>
==在事件處理函式中，this就是觸發事件的對象物件==
所以如果在一個按鈕上面註冊click事件，使用者點擊這個按鈕，這個this就會代表那個按鈕
:::info
此時this與e.target的結果是一樣都代表按鈕本身，但使用this必須是傳統函式
:::

document.addEventListener('click',function(){
    console.log(this);
})

這裡點擊就會是document本身
<br><br><br><br><br>

所以這裡在頁面上按下就會印出Clicked字樣

document.addEventListener('click',function(){
    this.body.innerHTML="Clicked";
})

<br>

:::danger
如果事件處理函式理使用的是箭頭函式，那麼this就會指向外層
:::
<br><br><br><br>

### <font class="h4">➤情況四:建構函式</font>
==在建構函式中，this就是新建立的空白物件==

function Point(){
    console.log(this);
}
new Point();

<br><br>

因此我們就可以利用這個空白物件，串上屬性建立一個新的物件

function Point(){
    this.x=3;
    this.y=4;
}
let p1 = new Point();
console.log(p1)

<br><br><br><br>

### <font class="h3">陷阱題</font>
### 題目一.

var someone = '全域';
function callSomeone(){
    console.log(this.someone)
}

var obj3 = {
  someone: '物件 3',
  fn() {
    callSomeone(); // 通常平常不會這樣去取用 this
  }
}
obj3.fn();//全域

這裡的this指向的是全域
<br><br><br><br>

### 題目二.callback function

var someone = '全域';
function callSomeone(){
    console.log(this.someone)
} 

var obj4 = {
  someone: '物件 4',
  fn() {
    setTimeout(function () {
      console.log(this.someone);
    });
  }
}
obj4.fn();//全域

`fn()`這段是屬於callback function ，callback function 大部分來說是屬於simplecall，所以this大多指向全域
<br><br><br><br>

### 題目三.巢狀中的this
巢狀中的this會指向window

let obj = {
    func1:function(){
        console.log(this === obj) //true

        var func2 = function(){
            console.log(this === obj)  //false
        }
        func2()
    }
}

obj.func1()

<br><br><br><br>

### 題目四.

<br><br><br><br>

### 題目五: 箭頭函式的this
:::danger
箭頭函式沒有自己的this,會往外層尋找
:::

var newObj1 = {
  someone: "小明",
  callSomeone() {
    console.log('callSomeone', this.someone)
  },
  callMethods() {
    setTimeout(() => {
      this.callSomeone()
    }, 100)
  }
}
newObj1.callMethods()  //callSomeone 小明