JavaScript普通函数与箭头函数有怎样的区别？

news2024/10/6 18:29:56

比较点	普通函数	箭头函数	具体案例
简写	/	箭头函数如果没有参数，同时函数体的返回值只有一句，则{}和return都可以省略。	1、函数简写
this指向	this总是指向调用它的对象，如果作为构造函数，它指向创建的对象实例	箭头函数的this指向的是父级作用域的this，是通过查找作用域链来确定 this 的值，也就是说看的是上下文的this，指向的是定义它的对象，而不是使用时所在的对象。	2、this指向
this改变	call()、apply()、bind()等方法能改函数中this的指向	call()、apply()、bind()等方法不能改变箭头函数中this的指向	3、改变this指向
构造函数	可以作为构造函数，用来创建对象实例	箭头函数不能作为构造函数使用	4、构造函数
arguments对象	每一个普通函数调用后都具有一个arguments对象，用来存储实际传递的参数。	箭头函数没有自己的arguments,取而代之用rest（剩余）参数...arg来解决	5、arguments与...args
prototype原型	具有prototype	没有prototype原型	6、prototype原型

1、箭头函数简写：

箭头函数如果没有参数，同时函数体的返回值只有一句，则{}和return都可以省略

var fn = () => console.log("123");//去掉了{} 和 return
fn(); //'123'

2、this指向：

普通函数中this指向的是调用它的对象，如果作为构造函数，它指向创建的对象实例
箭头函数不会创建自己的this，所以它没有自己的this，它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。

普通函数中this指向的9大场景：

函数的调用方式	this指向
对象.函数( )	对象
函数( )	window
IIFE 立即执行函数	window
定时器	window
DOM事件处理函数	添加事件监听的元素
数组[下标 ]( )	数组
call(对象,arg1,arg2)	对象
apply(对象，arry)	对象
new 函数（）	对象的实例

9大场景对应的案例代码，太多放不下，需要粉丝群获取。

箭头函数中this指向

箭头函数不会创建自己的this，所以它没有自己的this，它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。

<div id="box"></div>
<script>
   var fn = () => console.log(this); //window
   //var fn=function(){console.log(this);} // <div id="box"></div>
   document.getElementById("box").onclick = fn;
</script>

如果fn是普通函数,则this指向的是#box,如果是箭头函数，则this指向的是window

3、改变this指向

普通函数通过调用call()、apply()、bind()可以改变this指向。
箭头函数无法通过调用call()、apply()、bind()改变this指向。

普通函数

<script>
   const obj = {};
   function fn() {
       console.log(this);
  }
   fn(); //window
   fn.apply(obj); //obj  
   fn.call(obj); //obj
   fn.bind(obj)(); //obj
</script>

箭头函数

<script>
   const obj = {};
   const fn = () => console.log(this);
   fn(); //window
   fn.apply(obj); //window
   fn.call(obj); //window
   fn.bind(obj)(); //window
</script>

4、构造函数

普通函数可以作为构造函数来创建对象实例
箭头函数不能作为构造函数来使用，因为箭头函数没有自己的this

普通函数-用作构造函数

<script>
   function Person(name) {
       this.name = name;
  }
   const p = new Person("张三");
   console.log(p); //{name: '张三'}
</script>

箭头函数-用作构造函数会报错

<script>
   const fn = (a) => {
       console.log(a);
  };
   fn(1); //1
   console.log(new fn(1)); //Uncaught TypeError: fn is not a constructor
</script>

5、arguments与...args

每一个普通函数调用后都具有一个arguments对象，用来存储实际传递的参数。
箭头函数中访问arguments如果存在，则是来自于他的外层普通函数的arguments
箭头函数没有自己的arguments对象，取而代之用rest（剩余）参数...args解决

普通函数中arguments

function sum(a) {
   console.log(arguments);
   console.log(arguments[0]);
}
sum(1, 2, 3);
//Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
//1

箭头函数没有arguments对象

const sum = () => console.log(arguments);//arguments未定义
sum(); //Uncaught ReferenceError: arguments is not defined

箭头函数中访问arguments如果存在，则是来自于他的外层普通函数的arguments

function a() {
   var b = () => console.log(arguments);//arguments是a函数中的
   b();
}
a(1, 2, 3); //Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

箭头函数中 ...args剩余参数

const sum = (a, ...args) => console.log(args);
sum(1, "a", "b", 3); // ['a', 'b', 3]

arguments包含实际传递的所有参数，...args是剩余参数，只能放在所有参数后，并且不包含剩余参数前的参数。以下是错误写法

const sum = (a, ...args,b) => console.log(args);

6、prototype原型

普通函数具有prototype原型属性
箭头函数没有prototype原型属性

<script>
   //箭头函数
   var a = () => 1;
   //普通函数
   function b() {
       return 2;
  }
   console.log(a.prototype); // undefined
   console.log(b.prototype); // {constructor: ƒ}
</script>