上篇説到传统函式This指向基本原则：呼叫时前面的物件是谁，和怎麽定义无关，但箭头函式的This指向，完全不是这样运作的。

箭头函式基本认识

• ES6 新增的语法。
• 让 JavaScript 的撰写的更精简。

再来看传统函式与箭头函式的差别:

• 传统函式

const arr = [1,2,3,4,5];

const  filterArr = arr.filter(function(item){
  return item % 2; //除2的余数 为真值取出来
});

• 箭头函式

const arr = [1,2,3,4,5];

const  filterArr = arr.filter(item => item % 2 );

console.log(filterArr);

区别在於以下几点：

• function
• 大括号 { }
• item的( )
  以上几个都被拿掉，但是要注意 function 里面的参数只有一个时才可以把（ ）拿掉。
  补充：箭头函式自带return功能，但是前提是要把{}拿掉才会生效。

再来一段范例：

var name = '全域';
const obj = {
    name: '物件',
    callName: function () {
    console.log(this.name); //物件
    setTimeout(function () {
      console.log(this.name); //全域
      console.log(this); //windows
    }, 100);
  },
};

obj.callName();

setTimeout里面的callback function this.name指向会是全域，this 则是指向windows。

接下来改成箭头函式：

var name = '全域';
const obj = {
    name: '物件',
    callName: function () {
    console.log(this.name); //物件
    setTimeout(() => {
      console.log(this.name); //物件
      console.log(this); //obj
    }, 100);
  },
};

obj.callName();

因为箭头函式没有自己的This，所以callback function This指向会变成跟外部函式作用域的This指向ㄧ样。

假如箭头函式外部没有函式呢？

var name = '全域';
const obj = {
  name: '物件',
   callName: () => {
     console.log(this.name)
   }
};

obj.callName();

外部找不到函式，箭头函式This就会指向为全域。

总结

传统函式This指向是看呼叫函式前面的物件。
箭头函式没有自己的This，如果外部有函式，作用域This就会跟外部函式一样，如果没有外部无函式This指向则是全域。
setTimeout里面的callback function this指向则会是windows。

明天要来讲解最後一篇JavaScript的观念篇，其他观念则会放在其他篇小章节里，之後就会开始Vue的篇章，敬请期待，祝大家中秋节快乐！