ES6中的箭头函数

在ES6中 允许使用箭头 (=>) 定义函数

声明一个箭头函数

 let fn = (a,b)=>{
     return a+b;
 } 
  //调用函数
 let result = fn(1,2);
console.log(result)     //输出3

函数中的this指向的是window

 function getName(){
      console.log(this.name)	//this == window
 }
 let getName2 = () =>{
     console.log(this.name)		//this == window
 }
//设置window对象的name属性
window.name="aaa";
const school = {
   name:"ATGUNGU"
}

 //直接调用
 getName()		//aaa
 getName2()		//aaa

 //call方法调用
 getName.call(school)		//ATGUNGU  此时this指向的是school
 getName2.call(school)		//aaa      this指向还是window

在箭头函数中的this 是静态的，this始终指向函数声明所在作用域下的this的值

箭头函数不能作为构造实例化对象

let Person = (name,age) => {
   this.name = name;
   this.age = age;
  }
   let me = new Person("xiao",30);
    console.log(me)			//会报错

箭头函数不能不能使用arguments 变量

let fn = () => {
  console.log(arguments)		//会报错	
 }
 fn(1,2,3)

箭头函数的缩写
1) 省略小括号，当形参有且只有一个的时候

let add = n => {
 return n + n;
 }
 console.log(add(9))  //18

2. 省略花括号，当代码体只有一条语句时,此时return 必须省略 而且语句的执行结果就是函数的返回值

let pow = n => n*n;
 console.log(pow(5))		//25

箭头函数的应用

从数组中返回偶数的元素

const arr = [1,6,9,10,100,25];

普通函数的写法

const result = arr.filter(function(item){
  if(item % 2 == 0){
        return true
    }else{
        return false
    }
}) 
   console.log(result)	//6 10 100

箭头函数的做法

const result = arr.filter(item => item % 2 === 0)
console.log(result)		//6 10 100

总结

1. 箭头函数中this 是静态的，this始终指向函数声明所在作用域下的this的值
2. 箭头函数不能作为构造实例化对象，不能使用new操作符
3. 不能使用arguments 变量
4. 当形参有且只有一个的时候可以省略小括号
5. 当代码体只有一条语句时,可以省略花括号，此时return 必须省略 而且语句的执行结果就是函数的返回值
6. 箭头函数适合与this无关的回调，定时器，数组的方法回调，不适合与this有关的回调，事件回调，对象的方法