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

最新推荐文章于 2025-10-25 09:52:46 发布

原创最新推荐文章于 2025-10-25 09:52:46 发布 · 646 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 专栏收录该内容

49 篇文章

订阅专栏

本文详细对比了JavaScript中箭头函数与普通函数的主要差异，包括定义方式、this绑定规则、构造函数使用、arguments对象及原型属性等方面，帮助开发者更好地理解和应用这两种函数类型。

箭头函数 & 普通函数区别

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: ƒ}