ES6 中的 箭头函数 和 普通函数 有哪些区别 ?
- 箭头函数没有 prototype(原型):
function test1 () {
console.log(test1.prototype)
}
test1() //普通函数 constructor: f test1()
const test2 = () => {
console.log(test2.prototype)
}
test2() //箭头函数 undefined;
- this 指向规则不同 :
箭头函数 :它没有 prototype(原型),所以它本身没有 this,箭头函数会捕获其所在上下文的 this 值,作为自己的 this值。即箭头函数的作用域会继承自外围的作用域。(箭头函数的 this 在定义的时候继承自外层第一个普通函数的 this,如果箭头函数外层没有普通函数,严格模式和非严格模式下它的 this 都会指向 window (全局对象))任何方法都改变不了其指向,如使用 call(),bind(),apply() 方法等。但是可以通过改变它外层 this 指向来间接的改变。
普通函数 : 的 this 指向调用它的那个对象,可以使用 call(),bind(),apply() 等方法重新指定 this 的指向。
var obj = {
a: 10,
b: () => {
console.log(this.a); // undefined
console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
},
c: function() {
console.log(this.a); // 10
console.log(this); // {a: 10, b: ƒ, c: ƒ}
}
}
obj.b();
obj.c();
var obj = {
a: 10,
b: function(){
console.log(this.a); //10
},
c: function() {
return ()=>{
console.log(this.a); //10
}
}
}
obj.b();
obj.c()();
- 箭头函数是匿名函数,不能作为构造函数,不能使用new
let test3 = () => {
console.log(this)
}
let test4 = new test3()
/*Error: Uncaught TypeError: test3 is not a constructor*/
- 箭头函数不绑定arguments,取而代之用 rest 参数 …x 解决
ES6 引入reset 参数(形式为 …变量名),用于获取函数的多余参数,这样就不需要使用 arguments 对象了。reset 参数搭配的变量是一个数组。
箭头函数的 this 指向全局,使用 arguments 会报未声明的错误,箭头函数的 this 指向普通函数时,它的 argumens 继承于该普通函数。
function A (a) {
console.log(arguments)//1,2,3,4
}
A(1,2,3,4);
const B = (...b) => {
console.log(b)//5,6,7,8
};
B(5,6,7,8);
const C = (c) => {
console.log(arguments)// Uncaught ReferenceError:arguments is not defined
};
C(9,10,11,12);
- 箭头函数不能换行
var a = ()
=> 1;//SyntaxError:Unexpected token
- 箭头函数不能当做 Generator 函数,不能使用 yield 关键字
- 箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名