Es6学习笔记：箭头函数

箭头函数 它长这样 => 是不是很抽象呢😁

在Es6中箭头函数是其中最有趣的新增特性那么它有什么呢？？

  1. 没有this、super（特级）、arguments（参数）和new.target绑定 箭头函数中的this、super、以及new.target这些值由外围最近一层非箭头函数决定
  2. 不能通过new关键字调用箭头函数没有[[construct]]方法，所以不能被用作构造函数，如果通过new关键字调用箭头函数，程序会抛出错误
1
2
3
> var Foo = () => {};
> var foo = new Foo(); // TypeError: Foo is not a constructor
>
  1. 没用原形由于不能通过new关键字调用箭头函数，因而没有构建原型的需求所以箭头函数不存在prototype这个属性
1
2
3
> var Foo = () => {};
> console.log(Foo.prototype); // undefined
>
  1. 不支持arguments 对象箭头函数没有arguments绑定，所以你必须通过命名参数和不定参数这两种形式访问函数的参数
  2. 不支持重复命名参数 无论在严格还是非严格模式下箭头函数都不能支持重复的命名参数；而在传统函数的规定中只有在严格模式下才不能有重复的命名参数

箭头函数的的大型选美现场👙

一号佳丽🐱 当你只有单一参数和只需要返回简单的值时可以使用以下这种

1
2
3
4
5
6
7
let refletct = value => value;

	等价于
		
		let reflect = funciton(value){
			return value;
		}

二号佳丽🐶 两个以上的就比较豪气啦！弄个括号包起来毕竟不像 single dog嘛😂

1
2
3
4
5
6
7
let sum = (num1 , num2) => num1 + num2

	等价于
	
	let sum = function(num1 , num2){
		return sum1 + sum2
	}

三号佳丽🏃‍♀️ 因为跑步啥也没带所以我们啥也不用传那么要怎么写呢❓

1
2
3
4
5
6
7
let sum = ( ) => 'hellow world'
	
	等价于
	
	let sum = function(){
		return 'hellow world'
	}

四号佳丽🏃 色即是空，🈳️即是色

1
2
3
4
5
6
7
let sum =( ) => {}

	等价于
	
	let sum = function(){
		//....
	}

五号佳丽🐍 花括号代表函数体的部分如果想在箭头函数外返回一个对象字面量，则需要将该字面量包括在小括号里

1
2
3
4
5
6
7
8
9
10
let getTempItem = id =>({	id:id, name:"Temp"})

	等价于
	
	let sum = function(id){
		return	{
			id:id,
			name:"Temp"
		}
	}

不绑定This

在箭头函数出现之前，每个新定义的函数都有它自己的 this值（在构造函数的情况下是一个新对象，在严格模式的函数调用中为 undefined，如果该函数被作为“对象方法”调用则为基础对象等）。This被证明是令人厌烦的面向对象风格的编程。

⚠️箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承 this 

1
2
3
4
5
6
7
8
9
function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 正确地指向 p 实例
  }, 1000);
}

var p = new Person();

如果指向错误除了使用箭头函数还可以把值分配给封闭的变量，可以解决this问题

1
2
3
4
5
6
7
8
9
function Person() {
  var that = this;
  that.age = 0;

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

函数的写法

1
2
3
4
5
var func = x => x * x;                  
// 简写函数 省略return

var func = (x, y) => { return x + y; }; 
//常规编写 明确的返回值

箭头函数也能使用三元表达式

1
2
3
var simple = a => a > 15 ? 15 : a;
simple(16); // 15
simple(10); // 10

更简明的promise链

1
2
3
4
5
promise.then(a => {
  // ...
}).then(b => {
  // ...
});

箭头函数进行排序

1
2
3
4
5
6
7
8
9
var arr = [10, 20, 1, 2];

arr.sort((x, y) => {
    return x-y
});
console.log(arr); // [1, 2, 10, 20]

arr.sort((x, y) => x-y);
console.log(arr); // [1, 2, 10, 20]

参考资料：深入了解ES6

​ 廖雪峰

​ MDN web docs

有待更新

👏👏点我提issue