js函数-6箭头函数

箭头函数

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。为什么叫Arrow Function？因为它的定义用的就是一个箭头：

x => x* x

 

这个函数就相当于：

function (x){
     return x * x;  
}

<script>
'use strict';
var fn = x => x * x;
var n = fn(3);
console.log(n);
console.log('测试浏览器是否支持Arrow Function: ');
if(n === 9){
  console.log('你的浏览器支持ES6的Arrow Function!');
} else {
  console.log('你的浏览器支持ES6的Arrow Function!');
}
</script>

 

结果：

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

<script>
'use strict';
var fn = x =>{
  if (x>0){
    return x * x;
  } else {
    return - x * x;
  }
}
var result1 = fn(3);
var result2 = fn(-3);
console.log(result1);
console.log(result2);

</script>

 

结果：

 

如果参数不是一个，就需要用括号（）括起来：

两个参数：

<script> 'use strict'; var fn = (x, y) => x * x + y * y; var result = fn(2,3); console.log(result); </script>

 

 

 结果：

无参数：

<script>
'use strict';
var fn = () => 3.14;
console.log(fn());
</script>

 

可变参数：

<script>
'use strict';
var fn = (x,y, ...rest) => {
  var i;
  var sum = x + y;
  for (i=0;i<rest.length;i++){
    sum += rest[i];
  }
  return sum;
}
console.log(fn(1,2,3,4,5));

</script>

 

结果：

 

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

// SyntaxError:
x => { foo: x }

 

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

// ok:
x => ({ foo: x })

 

<script>
'use strict';
var fn = x => ({
  f: function(x){
    return x -1;
  }
});
console.log(fn(3));

</script>

 

结果：

this

箭头函数看上去是匿名函数的一种写法，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。

由于JavaScript函数对this绑定的错误处理，如下面的例子无法得到预期的结果：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        return fn();
    }
};

 

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

<script>
'use strict';
var obj = {
  birth: 1990,
  getAge: function (){
            var b = this.birth;
            var fn = () => new Date().getFullYear() - this.birth; //this指向obj对象
            return fn();
          }
};
console.log(obj.getAge());

</script>

 使用了箭头函数，像以前那种使用

var that = this；

 

的这种用法就不再需要了。

由于this在箭头函数中已经按照词法作用域绑定了，所以用call（）或者apply（）调用箭头函数时，无法对this进行绑定，也就是说传入的第一个参数将被忽略：

<script>
'use strict';
var obj = {
  birth: 1990,
  getAge: function(year){
    var b = this.birth;//1990
    var fn = (y) => y - this.birth;//this.birth还是1990
    return fn.call({birth:2000},year);
  }
}
console.log(obj.getAge(2017));
</script>

 

虽然调用call（）函数传入了birth：2000，但是使用了箭头函数后，该参数将会被忽略掉。