箭头函数

箭头函数表达式的语法比函数表达式更短，而且没有本身的this，arguments，super或new.target。这些函数表达式更适用于那些本 来须要匿名函数的地方，而且它们不能用做构造函数。

首先：咱们先考虑一下这个箭头函数没有本身的this，arguments，super或>首先：咱们先考虑一下这个箭头函数没有本身的this，arguments，super或 new.target`是什么意思？带着问题去看下面的内容会更事半功倍。

1、语法

1.基础语法

(参数1, 参数2, …, 参数N) => { 函数声明 }

//至关于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
(参数1, 参数2, …, 参数N) => 表达式（单一）

// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}

// 没有参数的函数应该写成一对圆括号。
() => {函数声明}

2.高级语法

//加括号的函数体返回对象字面表达式：
参数=> ({foo: bar})

//支持剩余参数和默认参数
(参数1, 参数2, ...rest) => {函数声明}
(参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明}

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

2、没有本身的this，不绑定this

咱们先看一下下面的代码，

const Person = {
    'name': 'little bear',
    'age': 18,
    'sayHello': function() {
        setTimeout(function() {
            console.log('我叫' + this.name + '我今年' + this.age + '岁!')
        }, 1000)
    }
}
console.log(Person.sayHello()) //我叫我今年undefined岁!

打印的结果是undefined，知道是什么缘由吗？固然，setTimeout方法里面的this指向的是window，因此是undefined，sayhello方法中的this才是指向Person的，若是按照下面的方式将sayHello中的this赋值给封闭变量self,就能够正确打印结果了

const Person1 = {
    'name': 'little bear',
    'age': 18,
    'sayHello': function() {
        var self = this;
        setTimeout(function() {
            console.log('我叫' + self.name + '我今年' + self.age + '岁!')
        }, 1000)
    }
}
console.log(Person1.sayHello());//我叫little bear我今年18岁!

咱们再看一下下面的代码，想一想打印的结果是什么呢？

const Person3 = {
    'name': 'little bear',
    'age': 18,
    sayHello() {
        setTimeout(() => {
            console.log('我叫' + this.name + '我今年' + this.age + '岁!')
        }, 1000)
    }
}
console.log(Person3.sayHello());//我叫little bear我今年18岁!

这个结果是否如你所料呢？

箭头函数不会建立本身的this,它只会从本身的做用域链的上一层继承this。所以，在下面的代码中，传递给setInterval的函数内的this与 封闭函数中的this值相同

咱们再看看下面的代码就应该好理解了

const Person5 = {
    'name': 'little bear',
    'age': 18,
    sayHello: () => {
        setTimeout(() => {
            console.log('我叫' + this.name + '我今年' + this.age + '岁!')
        }, 1000)
    }
}
Person5.sayHello();//我叫我今年undefined岁!

封闭函数的this指向的是外部对象window，setTimeout继承上一层this,因此也是指向的window；

经过 call 或 apply 调用

首先咱们回顾一下 call 跟 apply

1. 他们各自的定义：

   • apply：调用一个对象的一个方法，用另外一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。
   • call：调用一个对象的一个方法，用另外一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。

2. 它们的共同之处：

   都“能够用来代替另外一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象”。

3. 它们的不一样之处：

   • apply：最多只能有两个参数——新this对象和一个数组argArray。若是给该方法传递多个参数，则把参数都写进这个数组里面，固然，即便只有一个参数，也要写进数组里。若是argArray不是一个有效的数组或arguments对象，那么将致使一个TypeError。若是没有提供argArray和thisObj任何一个参数，那么Global对象将被用做thisObj，而且没法被传递任何参数。
   • call：它能够接受多个参数，第一个参数与apply同样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊状况下须要改变this指针。若是没有提供thisObj参数，那么 Global 对象被用做thisObj。

咱们先来看一下下面的代码，思考一下打印的结果，

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);
  }
};

console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2（而不是3 ——译者注）

结果：

因为 箭头函数没有本身的this指针，经过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定this---译者注），他们的第一个参数会被忽略。（这种现象对于bind方法一样成立---译者注）

3、不绑定arguments

咱们都知道函数内部，argument是一个做为函数输入的值-原始数据或对象

var arguments = [5, 6, 7];

function person1(a, b, c) {
    console.log(arguments);
}
person1(1, 2);//arguments[1,2]

var arr1 = () => { return arguments; }
console.log(arr1());//[5,6,7]

var arr2 = (a) => { return arguments; }
console.log(arr2(1));//[5,6,7]

从上就能够看出，通常的函数是绑定了Arguments 对象，而箭头函数没有绑定

看下面的代码箭头函数中的arguments只是引用了封闭做用域内的arguments

var arguments = [1, 2, 3];
var arr = () => arguments[0];

arr(); // 1

function foo(n) {
  var f = () => arguments[0] + n; // 隐式绑定 foo 函数的 arguments 对象. arguments[0] 是 n
  return f();
}

foo(1); // 2

4、使用 new 操做符

箭头函数不能用做构造器，和 new一块儿用会抛出错误。

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

5、使用prototype属性

箭头函数没有prototype属性。

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

6、使用 yield 关键字

yield关键字一般不能在箭头函数中使用（除非是嵌套在容许使用的函数内）。所以，箭头函数不能用做生成器。

点击能够查看更多详情