ES6---箭头函数()=>{} 与function的区别
发布时间:2020-08-31 10:57:20 来源: 点击:
1.箭头函数与function定义函数的写法:
2.this的指向:
使用function定义的函数,this的指向随着调用环境的变化而变化的,而箭头函数中的this指向是固定不变的,一直指向的是定义函数的环境。
使用function定义的函数中this指向是随着调用环境的变化而变化的
明显使用箭头函数的时候,this的指向是没有发生变化的。
3.构造函数
function是可以定义构造函数的,而箭头函数是不行的。
4.变量提升
由于js的内存机制,function的级别最高,而用箭头函数定义函数的时候,需要var(let const定义的时候更不必说)关键词,而var所定义的变量不能得到变量提升,故箭头函数一定要定义于调用之前!
- //function
- function fn(a, b){
- return a + b;
- }
- //arrow function
- var foo = (a, b)=>{ return a + b };
2.this的指向:
使用function定义的函数,this的指向随着调用环境的变化而变化的,而箭头函数中的this指向是固定不变的,一直指向的是定义函数的环境。
- //使用function定义的函数
- function foo(){
- console.log(this);
- }
- var obj = { aa: foo };
- foo(); //Window
- obj.aa() //obj { aa: foo }
使用function定义的函数中this指向是随着调用环境的变化而变化的
- //使用箭头函数定义函数
- var foo = () => { console.log(this) };
- var obj = { aa:foo };
- foo(); //Window
- obj.aa(); //Window
明显使用箭头函数的时候,this的指向是没有发生变化的。
3.构造函数
- //使用function方法定义构造函数
- function Person(name, age){
- this.name = name;
- this.age = age;
- }
- var lenhart = new Person(lenhart, 25);
- console.log(lenhart); //{name: 'lenhart', age: 25}
- //尝试使用箭头函数
- var Person = (name, age) =>{
- this.name = name;
- this.age = age;
- };
- var lenhart = new Person('lenhart', 25); //Uncaught TypeError: Person is not a constructor
function是可以定义构造函数的,而箭头函数是不行的。
4.变量提升
由于js的内存机制,function的级别最高,而用箭头函数定义函数的时候,需要var(let const定义的时候更不必说)关键词,而var所定义的变量不能得到变量提升,故箭头函数一定要定义于调用之前!
- foo(); //123
- function foo(){
- console.log('123');
- }
- arrowFn(); //Uncaught TypeError: arrowFn is not a function
- var arrowFn = () => {
- console.log('456');
- };
重点:function(res){} 和 res =>{}这两种写法this指向是不一样的
上一篇:Fetch的使用(es6)
下一篇:axios使用教程
精彩推荐相关内容
- (2020-02-26)js中使用new Date("yyyy-mm-dd hh:mm:...
- (2020-08-28)Fetch的使用(es6)
- (2020-03-25)ios下的浏览器new Date报错
- (2020-08-31)ES6---箭头函数()=>{} 与function的区别
- (2020-08-31)axios使用教程
- (2020-03-21)JS 无法清除Cookie的解决方法
- (2013-09-11)JavaScript验证Email
- (2013-09-10)JavaScript输入输出
- (2013-08-14)JavaScipt基本教程之前言
- (2013-09-11)JavaScript验证正则表达式大全
相关栏目
热门文章
最新图文
评论排行
- (5)条phpcms筛选功能(经典无错)
- (4)条朋友圈转“贩卖儿童判死”
- (4)条微信即将封杀分销平台?传30
- (3)条做优化,十个最让用户反感的
- (2)条phpcms v9字段筛选教程
- (2)条【织梦bug】织梦5.7进入后台
- (2)条phpcms v9通用api开发教程
- (1)条网页制作技巧教程:网页无障
- (1)条贪吃的阿里:阿里2年疯狂并
- (1)条史上最全SEO高级搜索命令大全