ES6箭头函数

ES6箭头函数

一、语法

1. 基本语法

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
// 相当于: => { return expression; } 

// 当只有一个参数的时候圆括号也可以不加:
(singleParam) => { statements }
singleParam => { statements }

// 没有参数的时候参数部分应该用一对圆括号代替
() => { statements }

2. 高级语法

// 如果要返回一个字面量的对象，应当把函数体用圆括号括起来:
params => ({foo: bar}) 

// rest参数和参数默认值也是支持的
(param1, param2, ...rest) => { statements } 
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { 
statements } 

// 参数列表的解构也是支持的
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f(); // 6

二、值得注意的地方

1.箭头函数没有自己的this关键字

箭头函数没有this关键字，但是它遵循正常的变量查找规则，即一层层地向外寻找。

function Person(){
  this.age = 0;

  setInterval(() => {
    console.log(this.age++); // 原本这个回调函数的this是指向window的，但是在这里，它指向了Person，因为箭头函数本身没有this，只有一层一层的向外寻找，结果是0、1、2、3、4……
  }, 1000);
}

var p = new Person();

2.严格模式下的箭头函数

严格模式下的箭头函数的this

   var f = () => { 'use strict'; return this; };
   console.log(f() === window); // true

普通模式下普通函数的this

   function fun() {
       console.log(this);	//结果是Window
   }
   fun();

严格模式下普通函数的this

   function fun() {
       'use strict';
       console.log(this);	//结果是'undefined'
   }
   fun();

3.箭头函数的call()和apply()方法

var adder = {
  base: 1,

  add: function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base: 2
    };

    return f.call(b, a);	//由于箭头函数没有this，所以这句话中的变量b没什么用
  }
};

console.log(adder.add(1));         // 将会打印2
console.log(adder.addThruCall(1)); // 仍然会打印2

4.箭头函数中没有arguments对象

和它自己的this类似，没有就一层一层向外查

var arguments = [1, 2, 3];
var arr = () => arguments[0];	//这个arguments就指向了全局的arguments变量

arr(); // 所以结果是1

function foo(n) {
  var f = () => arguments[0] + n; // 这个arguments就指向了foo的隐藏对象arguments
  return f();
}

foo(3); // 所以结果是6（arguments[0]为3）

那么在箭头函数中就用rest参数去替代arguments对象

function foo(n) { 
  var f = (...args) => args[0] + n; 
  return f(10); 
}

foo(1); // 11

5.对象方法中的箭头函数

'use strict';

var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log(this.i, this);
  }
}

obj.b(); // 打印undefined, Window {...}
obj.c(); // 打印10, Object {...}

所以可以得出结论对象方法中的箭头函数中的this是无法指向对象本身的，而是指向了全局Window。

另外一个例子

'use strict';

var obj = {
  a: 10
};

Object.defineProperty(obj, 'b', {
  get: () => {
    console.log(this.a, typeof this.a, this); // undefined 'undefined' Window {...}
    return this.a + 10; // this表示全局对象Window, 因此 'this.a' 返回 'undefined'
  }
});

6.箭头函数不能充当构造函数

var foo = 'bar';
var foo = new Foo(); // TypeError: Foo is not a constructor

7.箭头函数没有prototype属性

var Foo = () => {};
console.log(Foo.prototype); // undefined