深入理解箭头函数和传统函数的区别

深入理解箭头函数和传统函数的区别

箭头函数是从其它语言借鉴过来的一种表达形式，如java,c++等都有类似的表达形式，也被称为lambda表达式，即匿名函数。
那么js箭头函数是什么呢？它和传统函数又有什么区别你？

一、更为简洁的表现形式

// 传统函数const fn_a = function(a){    return a}console.log(fn_a(1))   //打印 1// 箭头函数const fn_b = b => bconsole.log(fn_b(1));   //打印 1

箭头函数函数相对于传统函数，它有着更简洁的表现形式，除了function的定义之外，连{ ... }和return都省略掉了。
不同的场景下箭头函数还有着不一样的表现形式：

// 有内部逻辑时x => {    x = "我想变化一下";    return x;}// 多个参数(x, y) => x + y// 没有参数() => "我的入参呢？"

二、没有arguments

// 传统函数const a = function(){    return Array.from(arguments)}console.log(a(1,2,3));   //输出：[1,2,3]// 箭头函数const b = () => Array.from(arguments)console.log(b(1,2,3));  // 报错，arguments is not defined

三、不能用作Generator函数

// 传统函数const a = function*(){    return "我想成为Generator函数！"}console.log(a());   // 输出a{<suspended>}// 箭头函数const b = *() => "我想成为Generator函数！";  // 报错：Unexpected token '*'const b = ()* => "我想成为Generator函数！"; // 报错：Unexpected token ')'

箭头函数是无法定义成Generator函数的，因此yield也是无法使用的。

四、不能使用new命令

// 传统函数const A = function(){    console.log("A");}const aa = new A();// 箭头函数const B = () => {    console.log("B");}const bb = new B();  //报错：B is not a constructor

五、不能调用apply、call

// 箭头函数const man = {    sex:"男",    a: function(){        console.log(this.sex);    },    b: () => {        console.log(this.sex);    },}man.a.apply(man);   //男man.b.apply(man);   //undefinedman.a.call(man);   //男man.b.call(man);   //undefined

传统函数可以通过apply、call改变函数的this指向，而三角函数不可以。

六、this指向(重点)

这是传统函数和箭头函数最主要的差异。也是箭头函数出来的意义所在。
我们在例子中去看它们差异：

var context = "window"var obj = {    context: "obj",    fn: function(){        console.log(this.context);  //"obj"        const _this = this;        function a(){            console.log(this.context);  //"window"            console.log(_this.context);  //"obj"        }        const b = () => {            console.log(this.context);  //"obj"            console.log(_this.context);  //"obj"        }        a();        b();    }}obj.fn();

在传统函数执行的时候，this的指向是根据上下文执行环境来确定的，上述例子我们分步看this：
①：obj.fn();从全局上下文栈进入obj.fn的执行栈，由于是从obj引用fn上下文栈，因此此时this是obj对象；
②：obj.fn执行过程中创建了上下栈a；
③：执行a方法，执行时由于实在全局环境中，所以此时this指向的是window。


传统函数的创建是会开辟一个栈内存的，因此它的this指向是根据栈内存被调用时所在上下文环境所决定的，而箭头函数是不会开辟一个栈内存的，它不像传统函数是一个引用类型，因此它的this指向也是在它被创建时候就固定了，固定指向创建它的内存块的上一层内存块，如：window引用了b内存，b内存创建了箭头函数，此时this指向就是window。
这也是箭头函数无法被apply、call改变this指向，也不能执行new命令，因为这些都是服务有内存指向的应用类型。