javascript学习笔记(13)--箭头函数

ES6标准新增了一种新的函数：ArrowFunction（箭头函数）
它用箭头定义
x => x * x
相当于
function (x) { return x * x; }

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

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

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

 (x, y) => x * x + y * y

无参数

 () => 3.14

可变参数:

 (x, y, ...rest) => {
  var i, sum = x + y;
  for (i=0; i<rest.length; i++) { sum += rest[i]; }
  return sum; 
  }

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

var a=x => { foo: x } ;//这一步不会报错
a(1).foo
TypeError: a(...) is undefined

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

var a= x => ({ foo: x })
a(1).foo
1

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

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

 var obj = { 
 birth: 2000, 
 getAge: function () { 
 var fn = function () {
  return new Date().getFullYear() - this.birth;  };
  return fn(); } 
  };
  obj.getAge()
NaN

因为只有在obj的方法里的最外层函数this指向对象，方法里的函数指向window(undefined)

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

 var obj = { 
 birth: 2000, 
 getAge: function () { 
 var fn = () => new Date().getFullYear() - this.birth; return fn(); }
  };
obj.getAge()
20

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

var obj = { 
birth: 2000,
 getAge: function () { 
 var fn = () => new Date().getFullYear()- this.birth; 
 return fn.apply(window); …
obj.getAge()
20

本来把this绑定到window会返回NaN,但这里正常返回，说明无效

javascript学习笔记(13)--箭头函数

猜你喜欢