返回旧版| 微信建站| 我要建站 | 建站学习 | 加入收藏
js教程当前位置:首页 > HTML教程 > js教程 > 正文

ES6---箭头函数()=>{} 与function的区别

发布时间:2020-08-31 10:57:20   来源:   点击:
1.箭头函数与function定义函数的写法:
  1. //function 
  2. function fn(a, b){ 
  3. return a + b; 
  4. //arrow function 
  5. var foo = (a, b)=>{ return a + b }; 

2.this的指向:
使用function定义的函数,this的指向随着调用环境的变化而变化的,而箭头函数中的this指向是固定不变的,一直指向的是定义函数的环境。
  1. //使用function定义的函数 
  2. function foo(){ 
  3. console.log(this); 
  4. var obj = { aa: foo }; 
  5. foo(); //Window 
  6. obj.aa() //obj { aa: foo } 

使用function定义的函数中this指向是随着调用环境的变化而变化的
  1. //使用箭头函数定义函数 
  2. var foo = () => { console.log(this) }; 
  3. var obj = { aa:foo }; 
  4. foo(); //Window 
  5. obj.aa(); //Window 

明显使用箭头函数的时候,this的指向是没有发生变化的。

3.构造函数
  1. //使用function方法定义构造函数 
  2. function Person(name, age){ 
  3. this.name = name; 
  4. this.age = age; 
  5. var lenhart =  new Person(lenhart, 25); 
  6. console.log(lenhart); //{name: 'lenhart', age: 25} 

  1. //尝试使用箭头函数 
  2. var Person = (name, age) =>{ 
  3. this.name = name; 
  4. this.age = age; 
  5. }; 
  6. var lenhart = new Person('lenhart', 25); //Uncaught TypeError: Person is not a constructor 

function是可以定义构造函数的,而箭头函数是不行的。

4.变量提升
由于js的内存机制,function的级别最高,而用箭头函数定义函数的时候,需要var(let const定义的时候更不必说)关键词,而var所定义的变量不能得到变量提升,故箭头函数一定要定义于调用之前!
  1. foo(); //123 
  2. function foo(){ 
  3. console.log('123'); 
  4.  
  5. arrowFn(); //Uncaught TypeError: arrowFn is not a function 
  6. var arrowFn = () => { 
  7. console.log('456'); 
  8. }; 



重点:function(res){}  和 res =>{}这两种写法this指向是不一样的


下一篇:axios使用教程
版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814