箭头函数和普通函数有啥区别?箭头函数能当构造函数吗?

·  阅读 783

什么是箭头函数?

ES6中允许使用箭头=>来定义箭头函数。省去了function关键字,采用箭头=>来定义函数

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

1、语法更加简洁、清晰

2、箭头函数不会创建自己的this (它的this指向定义时外层执行环境的this,箭头函数中this的指向在它被定义的时候就已经确定了,之后永远不会改变。)

3、箭头函数继承而来的this指向永远不变

4、.call()/.apply()/.bind()无法改变箭头函数中this的指向

.call()/.apply()/.bind()方法可以用来动态修改函数执行时this的指向,但由于箭头函数的this定义时就已经确定且永远不会改变。所以使用这些方法永远也改变不了箭头函数this的指向,虽然这么做代码不会报错。

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

我们先了解一下构造函数的new都做了些什么?简单来说,分为四步:

① JS内部首先会先生成一个对象;

② 再把函数中的this指向该对象

③ 然后执行构造函数中的语句;

④ 最终返回该对象实例。

但是!!因为箭头函数没有自己的this,它的this其实是继承了外层执行环境中的this,且this指向永远不会随在哪里调用、被谁调用而改变,所以箭头函数不能作为构造函数使用,或者说构造函数不能定义成箭头函数,否则用new调用时会报错!
复制代码

6、箭头函数没有自己的arguments

箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部(函数)执行环境中的值

7、箭头函数没有原型prototype

let sayHi = () => {
    console.log('Hello World !') 
}; 
console.log(sayHi.prototype); // undefined
复制代码

8、箭头函数不能用作Generator函数,不能使用yeild关键字

箭头函数的 this 指向哪⾥?

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

// ES6 
const obj = { 
  getArrow() { 
    return () => { 
      console.log(this === obj); 
    }; 
  } 
}
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改