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

1、箭头函数语法上比普通函数简洁

//普通函数
function fn(){}
//箭头函数
let fn = () => {}

2、箭头函数的this指向和普通函数不同

普通函数的this一般指向的是调用它的对象：

function a(){
console.log(this);
}
a(); //window
//上面的a() <====> window.a()
//而且普通函数的this还是指向离它近的对象，如下：
var b = {
c:{
d:function(){console.log(this)}
}
}
b.c.d();//这里指向的是c ->  {d:function(){}}，所以是指向离的近的对象

箭头函数没有自己的this, 它的this是继承而来, 默认指向在定义它时所处的对象，而且使用call/apply等方式都无法改变this的指向：

//先要知道对于延时函数(setTimeout/setInterval)内部的回调函数的this指向全局对象window
function fn(){

setTimeout(function(){console.log(this);},1000); // 延时函数 -> window
setTimeout(() => {console.log(this);},1000);  //箭头函数这里的this指向定义时所处的对象，也就是fn

setTimeout(function(){
setTimeout(function(){console.log(this);},1000);//延时函数 -> window

console.log(this);							//延时函数 -> window
setTimeout(() => {console.log(this);},1000);//外层的this是处于window，而箭头函数指向定义时所处的对象，所以就是window

},1000);

setTimeout(() => {
setTimeout(function(){console.log(this);},1000);//延时函数 -> window

console.log(this);  						//箭头函数 ->   fn
setTimeout(() => {console.log(this);},1000);//外层的this是处于fn，而箭头函数指向定义时所处的对象，所以就是fn
},1000);
}

new fn();//会执行fn函数

//------------------------------------------
//call和apply
let obj = {name:'obj'}

function fn1(){console.log(this);}
fn1.call(obj);					//obj

let fn2 = () => {console.log(this);}
fn2.call(obj);					//window

function fn3(){console.log(this);}
fn3.apply(obj);					//obj

let fn4 = () => {console.log(this);}
fn4.apply(obj);					//window

注意：上面的代码有些在延时函数里，有些不在，所以打印的顺序可能不同

3.箭头函数中没有arguments(类数组)，只能基于…arg获取传递的参数集合(数组)

//1.
let a = function(){
console.log(arguments);
}
a(10,20,30);//Arguments(3) [10, 20, 30, callee: ƒ, Symbol(Symbol.iterator): ƒ]

//2.
let b = () => {
console.log(arguments);
};
b(10,20,30);//报错：arguments is not defined

//3.
let c = function(...arg){console.log(arg);}
c(10,20,30);//[10, 20, 30]

//4.
let d = (...arg) => {console.log(arg);}
d(10,20,30);//[10, 20, 30]

4.箭头函数不能被new执行(因为：箭头函数没有自己的this也没有prototype)

//普通函数：
function fn1(){
this.name = 'fn1';
console.log(this.name + ' --- new了');
}
console.log(fn1.prototype);	//{constructor: ƒ}
let f1 = new fn1();			//fn1 --- new了

//箭头函数：
let fn2 = () => {
this.name = 'fn2';
console.log(this.name + ' --- new了');
}
console.log(fn2.prototype);	//undefined
let f2 = new fn2();			//报错，fn2 is not a constructor ---- fn2不是一个构造器*/

• 点赞
• 收藏
• 分享
• 文章举报