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

# 箭頭函式的 this 指向差異

* 箭頭凾式本身會自帶 return
* This 綁定的差異

var name = '全域'
    const person = {
     name: '小明',
     callName: function() {
        console.log('1',this.name); // 1 小明
        setTimeout(function() {
            console.log('2',this.name); // 2 全域
            console.log('3',this); // 3 指向全域 windos
         },10);
        },
       }
    person.callName();

* 當我們setTimeout改成箭頭凾式時，指向都會往上一層找尋

 var name = '全域'
    const person = {
    name: '小明',
    callName: function() {
        console.log('1',this.name); // 1 小明
        
        // 改成箭頭凾式時，指向都會往上一層找尋        
        setTimeout(() => {
            console.log('2',this.name); // 2 小明
            console.log('3',this); // 3  物件
            },10);
        },
        
    }
  person.callName();



### ==陷阱題==

* 在箭頭凾式中沒有自己的this，所以將會向外去找尋凾式，若凾式找尋不到就會指向全域

var name = '全域'
const person = {
name: '小明',
callName: () => { 
    console.log(this.name); // 顯示 全域
    },
  }
person.callName();

* 若箭頭凾式向外找尋後有凾式執行就會指向凾式的this

 var name = '全域'
 const person = {
    name: '小明',
    callMe() { // 1. callName 的 this 向外找到這邊的凾式執行
    const callName = () => { 
        console.log(this.name); // 顯示小明
     };
   callName();
   }
 }
 person.callMe();


### ==實戰手法==

* 常見的傳統寫法中，setTimeout會指向外層物件，所以我們要用幾種方式去修改this

 var someone = '全域';

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

#### 第一種方式將 this 賦予變數

 var someone = '全域';

 var obj4 = {
    someone: '物件 4',
    fn() {
    //將this付予變數上使用    
    let vm = this;
    setTimeout(function () {
       console.log(vm.someone); // 顯示  物件 4
     });
    }
  }
  obj4.fn();

#### 第二種 將setTimeout 改成箭頭凾式，就會指向上一層凾式

 var someone = '全域';

 var obj4 = {
    someone: '物件 4',
    fn() {
     //改為箭頭凾式指向會往上一層凾式尋找 > fn          
    setTimeout( () => {
       console.log(this.someone); // 顯示  物件 4
     });
    }
  }
  obj4.fn();