JavaScript|箭头函数以及箭头函数与普通函数的区别前言什么是箭头函数箭头函数就是函数的一种简写形式，使用括号

前言

本篇主要为了了解箭头函数以及箭头函数与普通函数的区别，文笔水平欠缺，多多包涵

什么是箭头函数

箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个=>，紧接着是函数体。

基本语法

var fn = () => {}

等同于：

var fn = function(){}

可以看出，定义箭头函数的语法上比普通简洁，箭头函数省去了function关键字，采用箭头=>来定义函数，函数体跟在=>后的花括号中。

箭头函数的参数

如果箭头函数没有参数，直接写一个空括号即可
```
var fn = () => {}
```
如果箭头函数的参数只有一个，也可以省去包裹参数的括号
```
var fn = param => {}
```
如果箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中即可
```
var fn = (a,b,c) => {}
```

箭头函数的函数体

如果箭头函数的函数体只有一句代码，就是简单返回某个变量或者返回一个简单的JS表达式，可以省去函数体的大括号{ }。
```
let fn = data => data
//等同于
let fn = data=>{
    return data
}
```

如果箭头函数的函数体只有一句代码，就是返回一个对象，可以像下面这样写

// 用小括号包裹要返回的对象，不报错
let getTempItem = id => ({ id: id, name: "Temp" });

// 但绝不能这样写，会报错。
// 因为对象的大括号会被解释为函数体的大括号
let getTempItem = id => { id: id, name: "Temp" };

箭头函数与普通函数的区别

语法更加简洁、清晰
箭头函数不会创建自己的this
- 箭头函数没有自己的this对象。这里说的没有指的是箭头函数本身无法有效的使用this，它指向的永远是自己的父作用域；
- 箭头函数的this永远指向其父作用域。在没有规划父级作用域的情况下，执行代码中最高级别的，也就是window；
- 任何方法都改变不了this，包括call，apply，bind。
```
<script>
    var num = 1;
    var obj = {
        num: 2
    };

    var fun = (data) => {
        console.log(data,this.num);
        //console.log(window.num);
    }
    fun();
    
    //使用call 改变指向
    fun.call(obj,'改变指向后');
    //window.fun.call(window.obj);
</script>
```
结果如图：

原因：

a. 箭头函数内部的this是【词法作用域】，由上下文确定；

b. 箭头函数中的this是在“定义函数”的时候绑定，而不是在”执行函数“的时候绑定

词法作用域：指的是在书写代码时就已经决定了变量的作用域，因此当词法分析器处理代码时会保持作用域不变，JavaScript使用的就是词法作用域

由此可知，无论使用什么方法，只要是在全局中定义的箭头函数，它的this指向只会，也只能是window。所以刚才的输出代码完全可以看作：

 console.log(window.num);
 window.fun.call(window.obj);

箭头函数不能作为构造函数使用

我们先了解一下构造函数的new都做了些什么？简单来说，分为四步： ① JS内部首先会先生成一个对象； ② 再把函数中的this指向该对象； ③ 然后执行构造函数中的语句； ④ 最终返回该对象实例。

因为箭头函数没有自己的this，它的this其实是继承了外层执行环境中的this，且this指向永远不会随在哪里调用、被谁调用而改变，所以箭头函数不能作为构造函数使用，或者说构造函数不能定义成箭头函数，否则用new调用时会报错！

或者代码展示：
```
//创建箭头函数
var fun = () =>{
    console.log('箭头函数')
}

//创建构造函数
function Fun(){
    console.log('构造函数')
}

//分别使用console.dir() 打印
console.dir(fun)
console.dir(Fun)
```
如图：

最后

以上就是本文的所有内容，如果对你有所帮助，欢迎点赞收藏转发~