ES6之箭头函数

---

前言

箭头函数：在ES6中允许使用=>来定义函数。箭头函数相当于匿名函数，并简化了函数定义。

---

一、基本语法

箭头函数在语法上比普通函数简洁的多。箭头函数就是把function去掉，在小括号后面加上=>。

// 箭头函数
let fn = (name) => {
	// 函数体
    return `Hello ${name} !`;
};

// 等同于
let fn = function (name) {
    // 函数体
    return `Hello ${name} !`;
};

二、特点

1.省略小括号

只有一个参数可以省略小括号()。

//原代码
let demo=function(x){
	console.log(x);
}
demo(1)

//简写后
let demo = x => {
	console.log(x);
}
demo(1)

2.省略{}和return

返回值只有一条语句是，可以省略大括号{}和return。

//原代码
let demo=function(x){
	return x;
}
console.log(demo(2));

//简写后
let demo = x => x
console.log(demo(2));

3.没有内置对象

箭头函数没有augrments内置对象。

let demo = () => {
	console.log(arguments);
}
demo()

4.构造函数

箭头函数不能用于构造函数。

//构造函数
let Person = function () {
	console.log('4');
}
let p1 = new Person()
console.log(p1);

//箭头函数的构造函数
let Person = () => {

}
let p1 = new Person()
console.log(p1);
// 当它运行时，控制台显示：Person is not a constructor

5.prototype属性

箭头函数没有prototype属性。

//构造函数
let Person = function () {
	console.log('5');
}
Person()
console.log(Person.prototype);

6.call()、apply()以及this指向

call，apply可以调用箭头函数，但是不能改变this指向。
箭头函数的this指向父作用域，（调用它的地方）
注意：this不能发生改变。但如果有该需求，可以通过改变其父作用域的指向。

var name = 'window'
let demo = function () {
	console.log('测试');
	console.log(this.name);
}
var obj = {
	name: 'obj'
}
demo()
demo.call(obj)
demo.apply(obj)

let fn = () => {
	console.log(this.name);
	console.log('箭头');
}
fn()
fn.call(obj)
fn.apply(obj)

---

总结

以上就是今天要讲的内容。