持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第14天，点击查看活动详情

铃铛说点题外话

一句话前情回顾：this的指向只与调用者和调用方式有关，按照new实例化>显示绑定>隐式绑定>默认调用优先级排序

一句话介绍今天：箭头函数

今天就要把箭头函数打下来

铃铛说正文

先说说箭头长啥样

() => {}

普通函数长这样

function () {}
//或者
function fn() {}

接下来就来掰扯掰扯他们的区别吧

this的指向不同：箭头函数会指向它外层作用域的this，普通函数指向他的调用者

    var name = "window"
    var obj = {
      name : "obj",
      foo1: function () {
        console.log(this.name);
      },
      foo2: () => {
        console.log(this.name);
      }
    }
    obj.foo1()   //obj
    obj.foo2()   //window

箭头函数不能作为构造函数

其实这里涉及实例化的相关内容，但是这里不详细说明了，大家只需要知道实例化是需要改变this指向的，但是因为箭头函数不存在this，所以箭头函数不能作为构造函数

补充说明：当我们new实例化的时候，会有以下的步骤

首先会在函数里创建一个空对象

将构造函数的显式原型绑定到空对象的隐式原型上

将this绑定到新的空对象上

如果构造函数没有返回空对象，那么就返回空对象

箭头函数不存在arguments对象，使用扩展运算符代替

    function foo() {
      setTimeout(() => {
        console.log(argument);
      }, 0)
    }
    foo([1, 2, 3])

这样会抛出错误

    function foo() {
      setTimeout(() => {
        console.log(...arguments);   //[1, 2, 3]
      }, 0)
    }
    foo([1, 2, 3])

箭头函数都是匿名函数，普通函数可以匿名可以具名

这个就不需要详细解释了，就是字面意思，你懂的

跟铃铛说再见

学习的最后一步：放松

今日冷笑话：从前有个人钓鱼，钓到了只鱿鱼。鱿鱼求他:你放了我吧，别把我烤来吃啊。那个人说:好的，那么我来拷问你几个问题吧。鱿鱼很开心说:你考吧你考吧!然后这人就把鱿鱼给烤了..

放松结束，猜猜明天会说讲些什么吧

细说JS系列（十四）—箭头函数

铃铛说点题外话

铃铛说正文

跟铃铛说再见