它們之間的區(qū)別：
（1）箭頭函數(shù)沒有自己的this。
（2）不可以當作構(gòu)造函數(shù)，不可以對箭頭函數(shù)使用new命令，否則拋出錯誤。
（3）不可以使用arguments對象，該對象在函數(shù)體內(nèi)不存在。如果要用，可以用 rest 參數(shù)代替。
（4）不可以使用yield命令，箭頭函數(shù)不能用作 Generator 函數(shù)。

下面結(jié)合代碼來解析：第一點和第二點

1、不可以當作構(gòu)造函數(shù)，也就是說，不可以對箭頭函數(shù)使用new命令，否則會拋出一個錯誤

<script>
//箭頭函數(shù)
let demo01 = ()=>{
    console.log("demo01");
}

let demo01Fun =new demo01();


</script>

輸出結(jié)果：

<script>
//普通函數(shù)
function demo02(){
    console.log("demo02");
}

let demo02Fun =new demo02();


</script>

2、箭頭函數(shù)沒有自己的this對象
下面代碼通過call函數(shù)給函數(shù)指定了this{id：42}

<script>

function demo01() {
	//箭頭函數(shù)
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

demo01.call({ id: 42 });

</script>

輸出結(jié)果：

但是同樣是調(diào)call函數(shù)指定this{id:42}，為何輸出的卻是全局中id= 21呢？

<script>
    //普通函數(shù)
    function demo02() {
        setTimeout(function () {
            console.log('id:', this.id);
        }, 100);
    }

    var id = 21;

    demo02.call({ id: 42 });

</script>

下面給代碼加上斷點調(diào)試一下看看：

<script>
    //普通函數(shù)
    function demo02() {
        debugger;
        setTimeout(function () {
            debugger;
            console.log('id:', this.id);
        }, 100);
    }
    debugger;
    var id = 21;
    demo02.call({ id: 42 });
</script>

代碼運行到第一個斷點時，Global中存在id=21。

代碼運行到第二斷點處，此時出現(xiàn)方法demo02的局部變量Local，this指向的是{id:42}。

代碼運行到定時器時,this指向的windows，id=21。

而定時器中是箭頭函數(shù)的，這時this指向的{id:42}，從這可以看出箭頭函數(shù)繼承了調(diào)用它時的this。
也就是：
它沒有自己的this對象，內(nèi)部的this就是定義時上層作用域中的this。也就是說，箭頭函數(shù)內(nèi)部的this指向是固定的，相比之下，普通函數(shù)的this指向是可變的。

箭頭函數(shù)沒有this，箭頭函數(shù)的ES5等價寫法如下：

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

思考題：
請問下面的t1、t2、t3分別輸出什么？文章來源地址http://www.zghlxwxcb.cn/news/detail-658890.html

function foo() {
  return () => {
    return () => {
      return () => {
        console.log('id:', this.id);
      };
    };
  };
}

var f = foo.call({id: 1});

var t1 = f.call({id: 2})()(); 
var t2 = f().call({id: 3})(); 
var t3 = f()().call({id: 4}); 

到了這里，關(guān)于【ES6】箭頭函數(shù)和普通函數(shù)的區(qū)別的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！