在我们开始之前，有几件重要的事情需要考虑。
我是一个初级开发者，写文章是我学习的方式，这意味着可能会有错误。如果你发现任何错误，请在评论中告诉我，І将予以纠正:)
一些信息如定义或例子来自互联网，如果你看到属于你的东西，并希望得到认可或将其删除--请联系我，І将很乐意这样做。
学习是有趣的，所以我们开始吧！🔥
箭头函数是ES6 js的一个新特性，它们是必须了解的，因为它们有助于使你作为一个开发者的生活变得更容易、更有趣:)
让我们通过与普通函数的比较来更好地理解它。
下面是几个常规函数的例子。
例子1 - 有两个参数的函数。
function sum(a, b) {
return a + b
}
例2 - 有一个参数的函数。
function isPositive (number) {
return number ›= 0
}
例3 - 没有参数的函数。
function randomNumber() {
return Math.random
}
例4 - 没有名字的匿名函数。
document. addEventListener('click', function() {
console.log(‘Click’)
})
现在让我们试着把这些正则函数转换成箭头函数。
例1 - 有两个参数的函数。
function sum(a, b) {
return a + b
}
step 1:
sum(a, b) {
return a + b
}
step 2:
let sum = (a, b) {
return a + b
}
step 3:
let sum = (a, b) => {
return a + b
}
这是最简单和最常见的函数之一。
第1步--删除function 关键字。这是因为对于箭头函数function 关键字是假定的。
第2步--将我们的函数分配给一个变量。当我们有function 关键字时，它将为我们做这件事，但由于我们删除了它，我们必须将我们的函数之和分配给一个变量，以便储存它。为此，我们使用let 。因此，我们创建一个变量sum，然后用= 符号将我们的箭头函数存储在里面。
第3步--添加箭头➡️ 😄。这就是创造奇迹的原因。它表明我们在箭头的左边有参数，在它的右边，在括号里，我们有函数。
现在，我们的例1函数和步骤3中的函数是一样的恭喜你得到了第一个箭形函数🎉。
这还不算完，我们还可以做得更好。
step 3:
let sum = (a, b) => {
return a + b
}
Shorten to one line
let sum = (a, b) => a + b
有了箭头函数，我们可以把代码缩短到一行。这可以通过删除return 关键字和大括号来实现。这是有可能的，因为箭头之后的一切都被假定为返回，所以我们可以省略return 和{} 。现在第1个例子函数=第3步中的函数=单行函数，AMAZING MAGIC 🔥
例2--有一个参数的函数。
function isPositive (number) {
return number ›= 0
}
Step 1:
isPositive (number) {
return number ›= 0
}
Step 2:
let isPositive = (number) {
return number ›= 0
}
Step 3:
let isPositive = (number) => {
return number ›= 0
}
Step 4:
let isPositive = (number) => number ›= 0
Step 5:
let isPositive = number => number ›= 0
现在让我们对有一个参数的函数重复这个过程。
第1步 - 删除function 关键字。
第2步 - 在let 语句的帮助下，通过创建变量存储我们的函数。
第3步 - ARROW ➡️
第4步--删除return 和括号。美丽的🤓
奖励步骤5 - 因为我们有一个参数，所以我们甚至可以去掉传递到函数中的参数周围的小括号。
例3--没有参数的函数
function randomNumber() {
return Math.random
}
"І想玩个游戏" 👹
我们来练习一下。这个例子遵循我们的4个步骤。试着自己去做，并在注释中写下你得到的一行。在这之前，不要看注释。
例4--没有名字的匿名函数。
document. addEventListener('click', function() {
console.log(‘Click’)
})
step 1:
document. addEventListener('click', () => {
console.log(‘Click’)
})
step 2:
document. addEventListener('click', () => console.log(‘Click’))
没有名字的匿名函数这才是Arrow函数真正的闪光之处。
第一步--删除function ，添加箭头➡️。注意，我们不必通过写let 和= ，将其分配给一个变量。
第2步--把所有内容放在一行中，去掉大括号。
箭形函数帮助我们减少了代码，这很好，但现在是使用箭形函数的全部意义--他们在箭形函数中重新定义了this 这个关键字，而不是在普通函数中的this 。在这里，它的使用方式大不相同。
"在普通函数中，该 this 关键字代表调用函数的对象，可以是窗口、文档、按钮或其他。
而在箭头函数中， this 关键字总是代表定义箭头函数的对象"。
因此，基本上，箭头函数帮助我们简化了函数范围，并使使用this 关键字的过程更加容易。
为了更好地理解它，让我们看看ES5中如何使用this 。
var cat = {
name: 'Garfield',
showName: function() {
alert(this.name);
}
};
cat.showName(); // it will show - Garfield
这里我们有一个简单的对象--猫。在这个对象里面，我们有一个方法（属于一个对象的函数）。那么this 在这里指的是什么呢？对！就是这个。它将指向对象cat。
接下来，让我们看看this 是如何在方法的函数中表现的。
var cat = {
name: 'Garfield',
tasks: ['transform', 'eat fish', 'sleep'],
showTasks: function() {
this.tasks.forEach(function(task) {
alert(this.name + " wants to " + task);
});
}
};
cat.showTasks();
// [object Window] wants to transform
// [object Window] wants to eat fish
// [object Window] wants to sleep
嗯......你看，我们得到的不是猫，而是[对象窗口]？
对于为什么会发生这种情况，我们有什么猜测呢？
showTasks: function() {
this.tasks.forEach(function(task) {
alert(this.name + " wants to " + task);
});
事实是，this 已经超出了范围。'这个'总是指向它所在的函数的所有者，由于我们超出了范围--所以我们处理的是一个全局对象，也就是window。
当它在一个对象的方法里面时--该函数的所有者就是该对象。因此'this'关键字被绑定到对象上。然而，当它在一个函数内时，无论是独立的还是在另一个方法内，它将总是指代window/全局对象。
我们的方法有两个带有this 的函数，应该指向名字的那个是内部的，因此落在了范围之外。
再举一个网上的例子。
function Person() {
this.name = 'Jack',
this.age = 25,
this.sayName = function () {
// this is accessible
console.log(this.age);
function innerFunc() {
// this refers to the global object
console.log(this.age);
console.log(this);
}
innerFunc();
}
}
let x = new Person();
x.sayName();
// output:
// 25
// undefined
// Window {}
所以，在普通的函数中this ，根据该函数被调用的方式而变化--它是动态的。这是一个糟糕的设计，在某些情况下会导致在使用this 关键字时出现无法预料的行为。
另一方面，箭头函数中的this 的值在整个函数的生命周期中保持不变，并且总是与最接近的非箭头父函数中的this 的值绑定，这意味着无论如何或在哪里执行，箭头函数中的this 的值总是等于外部函数的this 的值。
function Person() {
this.name = 'Jack',
this.age = 25,
this.sayName = function () {
console.log(this.age);
let innerFunc = () => {
console.log(this.age);
}
innerFunc();
}
}
const x = new Person();
x.sayName();
// output:
// 25
// 25
需要记住的一件重要事情是，尽管箭头函数带来了词法范围，使得使用this 更加容易，但你应该小心，因为我们不能到处使用它。
如果你喜欢这篇文章并觉得有帮助，І将很高兴与你一起进一步探讨Arrow函数。
