js箭头函数

箭头函数

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this、arguments、super。箭头函数更适用于那些本身不需要匿名函数的地方，而且它不能作为构造函数。

一、语法：

基本语法：

?

1	let fun = ()=>console.log('fun()');

需要注意的是：

1、形参的位置：

　　·没有形参的情况下，()不能省略；

　　·当只有一个形参的情况下，()可以省略；

　　·当有多个形参的情况下，()不可省略；

2、箭头的右边 --->函数体

　　·当函数体只有一条语句或者表达式的时候，{}可以省略，如果省略{}会自动返回当前语句或者表达式的结果；

　　·当函数体有多条语句或者表达式的时候，{}可以省略，如果省略{}会自动返回当前的语句或者表达式的结果；

二、没有单独的this

在箭头函数出现之前，每一个新函数根据它是如何被调用的this值：

　　·如果该函数是一个构造函数，this指针指向一个新的对象；

　　·在严格模式下的函数调用下，this指向undefined；

　　·如果该函数是一个对象的方法，则它的this指针指向这个对象；

例如：

?

1 2 3 4 5 6 7 8 9 10 11 12

function Person() {       // Person()构造函数定义‘this’作为它自己的实例       this.age=0;       setInterval(function growUp() {           // 在非严格模式，growUp（）函数定义‘this’作为全局对象，           // 与在Person()构造函数中定义的‘this’并不相同           this.age++;           // console.log(this.age);//空       },1000);       this.age++;       console.log(this.age);//1  }

通过将this值分配给封闭给封闭的变量，可以解决this的问题：

?

1 2 3 4 5 6 7 8 9 10

function Person() {        var that = this;        that.age = 0;          setInterval(function growUp() {            // 回调引用的是`that`变量, 其值是预期的对象.            that.age++;            // console.log(that.age);        }, 1000);    }

而对于箭头函数：

?

1 2 3 4 5 6 7 8 9 10

function Person() {     this.age = 0;       setInterval(() => {         this.age++; // |this| 正确地指向 p 实例         // console.log(this.age);     }, 1000); }   var p = new Person();

三、与严格模式的关系

在严格模式下，严格模式中与this相关的规则都将被忽略，其他规则不变

?

1 2 3 4 5

var f = () => {        'use strict';        return this;    };    // console.log(f() === window) // 或者 global,返回true

严格模式的其他规则依然不变。