---
# System prepended metadata

title: this運作
tags: [六角-vue直播班]

---

---
tags : 六角-vue直播班
---

# this運作

### ==一個函式中包含多少參數==
```javascript=
// #1 一個函式中包含多少參數
var a = '全域'
function fn(params) {
  console.log(params, this, window, arguments);
  debugger;
}

fn();
```
* 在未傳入 params 值前，params及arguments都為空的狀態

![](https://i.imgur.com/LuTOdF0.png)

>　這時fn 函式傳入參數值

```javascript=
fn(1,2,3,4);
```
* params因為只有一個凾式參數，所以只有一個值、arguments比較像傳統凾式可帶入參數內所有的值。

![](https://i.imgur.com/DxtY0HI.png)


* 那this 此時指向為windos 全域變數

![](https://i.imgur.com/Yyit1Y1.png)

* windos全域變數還是指向自己

![](https://i.imgur.com/1bZMP7x.png)

### ==this 的指向為何==

* 傳統函式中的 this 只與調用方式有關
* 這種呼叫 凾式的方式 統稱為 **simple call**
```javascript=
    var someone = '全域';
    function callSomeone() {
         console.log(this.someone);
       }

    //simple callcj 呼叫方式     
    callSomeone(); //顯示 全域
```

* 若凾式前面有指向物件時指向就會指向物件本身

```javascript=
 var obj = {
    someone: '物件',
    callSomeone() {
        console.log(this.someone);
       }
    }
    obj.callSomeone();  //顯示 物件
```
* 例如調用了callSomeone方式，但凾式物件指向了 obj2 物件，所以顯示還是會指向obj2裡面的someone 顯示 物件2

```javascript=
 var obj2 = {
    someone: '物件2',
    callSomeone
      }
    obj2.callSomeone(); //顯示 物件2
```

### ==物件包物件的調用==

* 常見的物件包物件的調用方式，指向都會是往凾式的上一個物件指向

```javascript=
var wrapObj = {
    someone: '外層物件',
        callSomeone,
        nnerObj: {
            someone: '內層物件',
            callSomeone,
        }
    }
    // 調用第一層時     
    wrapObj.callSomeone(); // 顯示 外層物件
    // 調用第二層時  
    wrapObj.innerObj.callSomeone(); // 顯示 內層物件
```
### ==this避免的調用方式==

* 通常this 前面沒有物件時，指向就會向外找尋

```javascript=
 var obj3 = {
     someone: '物件 3',
     fn() {
            callSomeone(); // 通常平常不會這樣去取用 this
          }
     }
     //因為調用指向為凾式 並非物件所以就向外找尋
     obj3.fn(); //顯示  全域
```

* 在使用 callback function時，也盡量避免調用到this，因為this指向還是會向外找尋全域變數

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