ES6学习笔记(2)箭头函数

在学习箭头函数之前要先了解的是箭头函数解决了什么问题。

在这里要注意的是js的严格模式

因为使用babel进行打包的文件是在严格模式下运行的，所以在一些条件下跟我们在一些书上看到的观测到的实际上可能有一点的不同。

这里要注意的是

在严格模式下，this不能被指定为window，也就是在全局下的

function fnc(clg this.z)

将不会输入undefined，而是直接报错。

箭头函数的出现解决了哪些问题？

第一，简化了写法，使用箭头函数可以使得我们的代码量减少，而且更加的直观，这种情况特别适用于函数体只有一行的函数，传统的写法因为为了可读性，一般的函数最少都有三条，即使他只是返回一个字面值而已。

第二、明确了this。传统js的this有一个问题，就是他的this是在运行的时候确定的，而不是在定义的时候确定的，也就是说，箭头函数的this是确定的，不能被改变，也不能被call,apply,bind这些进行修改。

那么箭头函数的this永远指向哪里呢？永远指向上一个不是箭头函数的函数的this

var zz= 100;

var a={

zz: 10,

show :() =>{

console. log( this. zz);

}

}

a. show();

var fn= a. show;

fn();

这个箭头函数的this永远指向window，所以值一直是100

但是因为严格模式的原因，这段代码直接在浏览器中运行的效果跟在js文件中的效果会存在差异

但是如果我们使用的是一般的函数模式

那么a.show()的结果就是10，因为那个时候this是指向当前对象的。

其根本原因是因为箭头函数根本就没有自己的this，因此他的this就是外层的this,因为js的机制，所以指向的是一个非箭头函数的函数的作用域。

那么我们有没有办法让对象里面的函数一直指向自己呢？

这个还是可以通过闭包来进行解决

let a={

zz: 10,

show : function(){

return () =>{

console. log( this. zz);

}

}

}

可以来说一下箭头函数的一些机制

1、函数体内部的this对象就是定义的时候所在的对象而不是使用时所在的对象

2、不可以当作构造函数来进行使用，也就是不能new

3、不可以使用arguments对象，该对象在函数体内不存在，如果要用，可以使用rest参数

4、不可以使用yield命令，因此箭头函数不能做Generator函数

所以使用箭头函数一是为了少打点代码，让代码结构更加的清晰。二是为了明确运行的时候this到底指向谁，而不是在运行的时候去做this的判断。