箭头函数和普通函数有什么区别

阳光穿透心脏的1/2处 2024-02-20 12:55 77阅读 0赞

##### 1. 箭头函数比普通函数更加简洁，是通过 `=>` 符号定义的函数 #####

如果没有参数，就直接写一个空括号即可

如果只有一个参数，可以省去参数的括号

如果有多个参数，用逗号分割

如果函数体的返回值只有一句，可以省略大括号

##### 2. 箭头函数没有自己的this #####

箭头函数不会创建自己的this， 所以它没有自己的this，它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。

##### 3. 箭头函数继承来的this指向永远不会改变 #####

> var id = 'GLOBAL';  
> var obj = \{  
> id: 'OBJ',  
> a: function()\{  
> console.log(this.id);  
> \},  
> b: () => \{  
> console.log(this.id);  
> \}  
> \};  
> obj.a(); // 'OBJ'  
> obj.b(); // 'GLOBAL'  
> new obj.a() // undefined  
> new obj.b() // Uncaught TypeError: obj.b is not a constructor  
> 对象obj的方法b是使用箭头函数定义的，这个函数中的this就永远指向它定义时所处的全局执行环境中的this，即便这个函数是作为对象obj的方法调用，this依旧指向Window对象。需要注意，定义对象的大括号\{ \}是无法形成一个单独的执行环境的，它依旧是处于全局执行环境中。

##### 4. call()、apply()、bind()等方法不能改变箭头函数中this的指向 #####

>   
> var id = 'Global';  
> let fun1 = () => \{  
> console.log(this.id)  
> \};  
> fun1(); // 'Global'  
> fun1.call(\{id: 'Obj'\}); // 'Global'  
> fun1.apply(\{id: 'Obj'\}); // 'Global'  
> fun1.bind(\{id: 'Obj'\})(); // 'Global'

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

由于箭头函数时没有自己的this，且this指向外层的执行环境，且不能改变指向，所以不能当做构造函数使用。

##### 6. 箭头函数没有自己的arguments #####

箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是它外层函数的arguments值。

##### 7. 箭头函数没有prototype #####

箭头函数不具有prototype原型对象，不具有super,不有new

#####    8. 箭头函数的this指向哪⾥？ #####

箭头函数不同于传统JavaScript中的函数，箭头函数并没有属于⾃⼰的this，它所谓的this是捕获其所在上下⽂的 this 值，作为⾃⼰的 this 值，并且由于没有属于⾃⼰的this，所以是不会被new调⽤的，这个所谓的this也不会被改变。