箭头函数 & 普通函数 区别
1. 箭头函数函数使用箭头定义,普通函数则没有
//普通函数
function fun(){
//执行代码
}
//箭头函数
let func = () =>{
//执行代码
}
2.箭头函数均为匿名函数,普通函数具名、匿名均有
//普通函数 具名函数
function(){
}
//普通函数 匿名函数
let fun=function(){
}
//箭头函数
let fun = ()=>{
}
3.箭头函数不能作为构造函数,也不能使用new
let FunConstructor = () => {
console.log('匿名函数');
}
let fc = new FunConstructor();
4.箭头函数不绑定this,会捕获其所在的上下文的this值,作为自己的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()();
箭头函数绑定this: 箭头函数通过 call() 或 apply() 方法调用一个函数时,只传入了一个参数,对 this 并没有影响。
let obj2 = {
a: 10,
b: function(n) {
let f = (n) => n + this.a;
return f(n);
},
c: function(n) {
let f = (n) => n + this.a;
let m = {
a: 20
};
return f.call(m,n);
}
};
console.log(obj2.b(1)); // 11
console.log(obj2.c(1)); // 11
总结:
箭头函数的 this 永远指向其上下文的 this ,任何方法都改变不了其指向,如 call() , bind() , apply() 。
普通函数的this指向调用它的那个对象
5.箭头函数不具有arguments
对象,取而代之用rest参数…解决
每个普通的函数都具有arguments对象,用来存储实际传递的参数,而箭头函数则没有
function funA(a){
console.log(arguments);
}
funA(1,3,5,7,8,10,12); // Arguments(7) [1, 3, 5, 7, 8, 10, 12, callee: ƒ, Symbol(Symbol.iterator): ƒ]
let funB = (b)=>{
console.log(arguments);
}
funB (2,92,32,32); // Uncaught ReferenceError: arguments is not defined
let funC = (...c) => {
console.log(c);
}
funC(4,6,9,11); //(4) [4, 6, 9, 11]
6.箭头函数没有原型属性
var a = ()=>{
return 1;
}
function b(){
return 2;
}
console.log(a.prototype); // undefined
console.log(b.prototype); // {constructor: ƒ}