javaScript之箭头函数

一、认识箭头函数

1.1、什么是箭头函数

在JavaScript中，箭头函数（Arrow Function）是一种使用箭头(=>)定义函数的新语法。它的引入为函数表达式提供了更简洁的语法，并且不绑定自己的this、arguments、super或new.target。

1.2、箭头函数更适用于什么

箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。

二、箭头函数的主要优点和用途

2.1、语法更简洁

相比于传统的函数表达式，箭头函数语法更简洁，更易读。

// 传统函数表达式  
const add = function(a, b) {  
	return a + b;  
}  

// 箭头函数  
const add = (a, b) => a + b;
// 箭头函数有一个参数的时候可以省略小括号
const add = a => { return a + b};
// 箭头函数返回值只有一条语句时可以省略return和{}
const add = a => a + b;
// 温馨提示：const声明的变量是不能重复的，由于本人比较***，宁愿打字提醒也不愿意更改。

2.2、不绑定自己的this

这是箭头函数最重要的特性之一。在普通函数中，this的值取决于函数的调用方式。但在箭头函数中，this的值始终指向定义函数时的上下文。这在处理回调函数、事件处理器或定时器时特别有用，可以避免this指向错误的问题。

const obj = {  
  value: 10,  
  double: function() {  
    // 这里的this指向obj  
    setTimeout(() => {  
      // 箭头函数中的this也指向obj  
      console.log(this.value * 2); // 输出20  
    }, 1000);  
  }  
}  
obj.double();

2.3、 没有arguments对象

箭头函数没有arguments对象，但你可以使用剩余参数（rest parameters）来获取函数的所有传入参数。

var fn_2 = () => { // 箭头函数没有内置对象 argument
	console.log(arguments); // arguments is not defined
}

2.4、 不能用作构造函数

箭头函数没有prototype属性，因此不能用作构造函数。

// 传统函数表达式  
var Person = () => {};
console.log(Person.prototype); //undefined 箭头函数没有prototype属性，没有原型

2.5、call、apply不能改变箭头函数中this的指向

var fn = () => {
	console.log(this); // window 箭头函数this不能改变，call与apply只能调用箭头函数
};
fn();
fn.call();
fn.call(obj);
fn.apply(obj);

总结

箭头函数的特点

1、箭头函数有一个参数的时候可以省略小括号
2、箭头函数返回值只有一条语句时可以省略return和{}
3、箭头函数没有内置对象arguments
*4、箭头函数不是构造函数，不能构造实例化对象
5、箭头函数的this不能发生改变，call和apply能调用箭头函数
*6、箭头函数没有原型对象
7、箭头函数的this指向父作用域（定义他的地方）

结语

总的来说，箭头函数提供了一种更简洁、更直观的方式来定义函数，并且解决了传统函数中this指向问题，使代码更加清晰和易于维护。