箭头函数

x=> x*x

上面的箭头函数相当于：

function (x) {
   return x * x    
}

 

箭头函数相当于匿名函数，并且简化了函数定义，箭头函数有两种格式，一种上面的，只包含一个表达式，连{...} 和 return 都省略掉了，还有一种包含多条语句，这时候不能省略{...} 和 return

x=> {
  if(x>0){
      return x *x
  }
  else {
      return - x * x
  }
}

如果参数不是一个，就需要用括号 () 起来

// 两个参数

  let summ1 = (x,y) => x +y

  console.log(summ1(1,2)); // 3

注意： 不能写成 let summ1 = (x,y) => {x+y}  加{} 后，  summ1(1,2)  == undefined

// 无参数
() => 3.14

// 可变参数
let summ = (x,y,...rest) =>{
   var sum = x + y ;

     for(let j of rest) {

       sum+= j

     }

     return sum

   }

  console.log(summ(1,2,3,4,5)); // 15

 

如果要返回一个对象，就要注意，如果是单表达式，这么写会报错：

// SyntaxError
x => {foo:x}

因为和函数体的 {...} 有语法冲突，所以要改为

x=> ({foo:x})

 

this

箭头函数内部的this是词法作用域，由上下文确定。

var obj = {
    birth: 1990,
    getAge: function(){
        var b = this.birth;
        var fn = function(){
            return new Date().getFullYear() - this.birth;   // this指向window或undefined，window中没找到birth
        }
        return fn();   // 此处的fn没有找到直接调用者，默认是window调用   普通函数的this指向默认调用者
    }
}
console.log(obj.getAge());  //NaN

现在，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj: 

var obj1 = {
    birth: 1990,
    getAge: function() {
        // console.log(this.birth)   // 1990
        var fn = () => new Date().getFullYear() - this.birth
        return fn()
    } 
}
console.log(obj1.getAge());    // 31