QQ咨询 官方微信

添加微信好友

官方小程序

百度小程序

微信小程序

头条小程序

关于我们

js教程

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

 admin  2020-08-31 10:59:50
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指向是不一样的


本文《ES6---箭头函数()=>{} 与function的区别》发布于石头博客文章,作者:admin,如若转载,请注明出处:https://www.pweb123.com/html/JavaScript/815.html,否则禁止转载,谢谢配合!
下一篇:axios使用教程

文章点评

我来说两句 已有9条评论
点击图片更换
石头博客网友 2022-06-02 10:16:26
回复 支持0
es6这个写法很不舒服
石头博客网友 2022-06-02 10:03:50
回复 支持0
第一次点评
石头博客网友 2022-06-02 00:04:58
回复 支持0
默认站点网友 于 2021-12-08 16:53:14发布
不错,必须顶一下!
赞一个
默认站点网友 2021-12-08 16:53:14
回复 支持1
不错,必须顶一下!
默认站点网友 2021-11-30 14:07:49
回复 支持1
绝对干货,值得收藏!
默认站点网友 2021-11-29 17:26:02
回复 支持0
文章不错,感谢分享!
默认站点网友 2021-05-14 11:27:02
回复 支持0
非常不错的文章 下次还会再来!
默认站点网友 2021-05-06 01:11:04
回复 支持0
文章不错非常喜欢
默认站点网友 2021-03-22 10:49:30
回复 支持0
不错,收藏一下
小程序插件

PHPcms小程序插件

phpcms小程序插件万能接口,支持一键授权登录

Pbootcms小程序插件

Pbootcms小程序插件,支持一键授权登录

迅睿cms小程序插件

xunruicms小程序插件,简单易学,专为小白设计

dedecms小程序插件

不需要php基础,只需要div+css就可,方便简单

添加微信好友

添加微信好友

微信小程序

百度小程序