什么是箭头函数，如何创建它？

任何编程语言中的函数都是创建和组合相关代码位的基本构建块。每种编程语言都提供了特定类型的实践来编写任何函数。箭头函数语法是在 JavaScript 中创建函数最常用和最有效的语法之一。

如何创建箭头函数：要编写箭头函数，只需创建任何变量，它可以是 const、let 或 var，但总是更喜欢使用 const 以避免不必要的问题。然后将函数代码分配给它的变量。因此，从现在开始，您可以通过在该变量前面写入括号来调用该函数。使用箭头函数语法，我们将函数视为一个对象并将定义分配给某个变量。以下是箭头函数的语法：

const myFunction = (param1, param2,
    .... paramN) => { // function code }
const myFunction = (param) => { // function code }
                      or 
const myFunction = param => { // function code }  
const myFunction = param => { return param*param }
                      or 
const myFunction = param => param*param

当只有一个语句时我们可以省略{}括号并且javascript将该语句视为返回值，当只有一个参数时也不需要写括号（）。箭头函数不能包含 (params) 和箭头 => 之间的换行符，= 和 >字符之间也不应该有任何空格。

示例 1：在这个示例中，我们将创建一个程序，首先使用普通函数添加两个数字，然后使用箭头函数。

使用正常函数：

JavaScript

function myFunction(){
  let a = 5, b = 4;
  return a+b;
}
console.log(myFunction());

使用箭头函数：

JavaScript

const myFunction = () =>{
  let a = 5, b = 4;
  return a+b;
}
console.log(myFunction());

输出：

9

说明：在箭头函数中，我们没有写出函数关键字，所以有必要把它赋值给某种变量，比如这里我们已经赋值给了一个名为myFunction的常量变量。

示例 2：在本示例中，我们将分别使用普通函数和箭头函数创建单个表达式的函数。

使用正常函数：

JavaScript

function myFunction(num){
  return num*num;
}
console.log(myFunction(4));

使用箭头函数：

JavaScript

const myFunction = num => num*num;
// Equivalent to const myFunction = (num) =>{ return num*num; }
  
console.log(myFunction(4));

输出：

16

说明：当我们在函数中只有一个 return 表达式时，箭头语法提供了一种更简单的编写方式。我们可以删除参数的括号以及返回语句以及代码块大括号。

箭头函数的限制：之前我们已经看到使用箭头语法创建函数是多么容易，现在是时候看看一些限制了，因为它们在某些情况下与普通函数的工作方式不同。

没有 this 关键字的绑定：由于没有 this 关键字的绑定，它不能用作方法。箭头函数包含词法this 而不是自己的。 this 的值将基于定义它们的范围。所以箭头函数是在窗口范围内定义的，因此 this 将引用窗口对象而不是编写函数的对象。不存在任何带有 'num' 的属性或方法，因此将打印 undefined。

JavaScript

var obj = {
  num: 10,
  myFunc: () => {console.log(this.num)}
}
  
obj.myFunc();

输出：

undefined

解释：普通函数中包含this ，它引用了它所属的对象，因此该函数属于obj对象，并且其中存在num属性，所以会打印成功。

箭头函数不能用作构造函数。

例子：

JavaScript

var MyFunction = () => {};
var instan = new MyFunction();

输出：

call、apply、bind 方法不适用于箭头函数：下面以传统函数的例子对这些方法的概念进行一般性回顾，稍后我们将看到它不适用于箭头函数。

• call() 方法：该方法用于调用对象的任何函数，在函数内部，this 将引用正在传递的对象。
• apply() 方法：它也与 call 方法类似。我们不是在这里单独传递参数，而是传递一个参数数组。
• bind() 方法：此方法也用于调用对象的任何函数，但它通过绑定对象来创建该函数的另一个副本，以便以后使用。

例子：

Javascript

let studentObj1 = {
    studentName: "Twinkle Sharma",
    branch:"Computer Science & Engineering"
}
  
function showDetails(position) {
    console.log(`${this.studentName} of ${this.branch} is a ${position}`)
}
  
showDetails.call(studentObj1, "Technical Writer");
   
showDetails.apply(studentObj1, ["Technical Writer"]);
  
const myFunction = showDetails.bind(studentObj1);
  
myFunction("Technical Writer");
  

输出：

解释：因为this是指定义箭头函数的作用域，所以指的是窗口，这就是为什么call、apply和bind方法不能与箭头函数一起工作的原因。因此，我们只能借助箭头函数访问窗口。并且由于属性 student name 和 branch 不存在于窗口对象中 undefined 将被打印。