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

青年管理者

概述

我们在学习js的时候经常会跟函数打交道，其中普通函数和箭头函数是用的比较多的2种，很多同学并不清楚二者的区别，这里我们花一些时间讨论一下。
作用域

在讨论箭头函数与普通函数的区别之前，我们需要先讨论一下作用域的概念。作用域分为:全局作用域，局部作用域，块级作用域

• 全局作用域
  
  
  
  • 　　全局作用域是在整个代码中都可访问的作用域。
    
  
  
• 局部作用域
  
  
  
  • 　　局部作用域一般代指函数作用域（Function Scope），它是在函数内部声明的作用域，函数内部的变量和函数只能在函数内部访问，外部无法直接访问
    
  
  
• 块级作用域
  
  
  
  • 　　块级作用域是在代码块（通常是由大括号{}包裹起来的部分）内声明的作用域。比如if(){...}、for(...){...}、try{...}等
    
  
  
• 示例
  1. [/code] 
  2. [/list][size=6]箭头函数与普通函数的区别[/size]
  4.  
  5. [list=1]
  6. [*][size=4]语法的不同[/size]
  7. [list]
  8. [*]箭头函数语法：箭头函数由 小括号()、箭头=》、大括号{}组成，例如(x)=>{ return 2*x;},  (x)=> 2*x...  ,其中括号和大括号依情况可以省略
  9. [*]普通函数语法：普通函数由关键字function、小括号、大括号{}组成，例如：function(x)=>{return 2*x;}
  10. [/list]
  11. [*][size=4]this绑定的不同[/size]
  12. [list]
  13. [*]箭头函数没有自己的this绑定，它会继承外层作用域的this值(继承规则：向外层作用域中, 一层层查找this, 直到有this的定义)。而普通函数的this值是根据调用时的上下文决定的。这里给出一些示例
  14. [list]
  15. [*][code]        <button id="bt1">利用箭头函数构造事件处理函数</button>
  16.         <button id="bt2">利用普通函数构造事件处理函数</button>
  17.    
  18.    
  19.    

  复制代码
  1.         <button id="bt1">利用箭头函数构造事件处理函数</button>
  2.         <button id="bt2">利用普通函数构造事件处理函数</button>
  3.    
  4.    
  5.    

  复制代码
   
  

构造函数：箭头函数不能用作构造函数，不能使用new关键字实例化对象。普通函数可以被用作构造函数创建对象实例

arguments对象：箭头函数没有自己的arguments对象，它会继承外层作用域的arguments对象。普通函数则会创建自己的arguments对象

箭头函数没有原型属性（prototype）

箭头函数不能通过call()、apply()或bind()方法来改变this的指向
总结

普通函数比较灵活，适用于各种场景，包括作为构造函数、改变this指向等。而箭头函数更适合用于简单的函数表达式和回调函数，需要根据具体的使用场景和需求来选择使用箭头函数还是普通函数。
 

来源:https://www.cnblogs.com/smallstone/p/18106142
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！