一.箭头函数和普通函数的区别:
基本格式:
普通函数:function(){}
箭头函数:()=>{}
两者的公共点是()里写参数,{}里写函数体。当参数只有一个时箭头函数的()可以省略,如果函数体中只有返回值时可以省略大括号和return。以下是一个例子:
普通函数:
箭头函数:
省略后可以写成:
不能为箭头函数命名,它是匿名的,箭头函数不能用new来创建构造函数的实例,普通函数可以(因为箭头函数创建的时候程序不会为它创建construct方法,也就是没有构造能力,用完就丢掉了,不像普通函数重复利用,因此也不需要构造函数原型,也就是不会自动生成prototype属性)
程序不会给箭头函数创建arguments对象:
不过箭头函数可以使用闭包来实现类似效果:
这里normal是普通函数,它返回了一个箭头函数,以为作用域链的关系箭头函数保存了argument的长度,最后返回了结果。
2.this指向不同:普通函数在调用时才确定指向--被谁调用this就指向谁(永远指向最后一个调用它的那个对象),是动态的。而箭头函数是在定义时就确定了指向,在哪里定义,就指向谁。
例如,定义一个对象想让他延迟0.5s输出名字:
如果这么写就不能输出名字,因为在函数执行时this才确定指向,这里它指向的是setTimeout的执行者----widow,所以无法输出“我是小明”。 可以这么改进:
插一句模板字符串:
被注释的是es6的模板字符串写法,下一行是es5写法,两者功能一样。
而如果使用箭头函数可以这么写:
因为箭头函数的this在定义时确定,这里的this指向的是obj对象, 所以可以得到正确的结果。箭头函数的this会指向在它定义时包裹它的外层函数的对象,若没有外层函数则指向widow。
这里普通函数这里的this指向的是widow会输出undefined,而箭头函数指向外层的arrow,可以正常输出。再看下面一个例子:
这里红框里第一个this的指向是icecream对象,所以这里的this.flavor是没有问题的,但是第二个this指向的是CodePen(此时正在调用的函数是CodePen),所以我们得到的结果是:
我们得到了CodePen对象的name,也就是CodePen。这种情况我们可以用bind来解决问题:
而用箭头函数的话就很简单了:
箭头函数的this指向在定义时确定,第二个this和第一个this一样都指向icecream,所以不会出现之前的问题。箭头函数不能通关call,apply,bind来改变this的值,但是他也可以调用call,apply,bind方法.
总结:
另外箭头函数也没用super和new.target绑定,和argument一样,Super和new.target的值由最近那一层包围的普通函数所决定的。