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

函数是创建和组合相关代码片段的基本构建单元，每种编程语言都提供了一些写函数的约定。箭头函数语法是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());

输出： 在箭头函数中，我们不写function关键字，因此需要将其分配给某种变量，就像我们在这里将其分配给一个名为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));

输出： 当函数中只有一个返回表达式时，箭头语法提供了一种更简单的编写方式。我们可以省略参数的括号，以及与代码块大括号一起的返回语句。

箭头函数的限制: 在前面我们已经看到了如何轻松地使用箭头语法创建函数，现在是时候看看一些限制了，因为在几种情况下它们不会像普通函数那样工作。

没有绑定的 this 关键字: 它不能作为方法使用，因为没有绑定 this 关键字。箭头函数包含词法 this 代替它们自己的 this。this 的值将基于其定义所在的作用域。因此，箭头函数在 window 作用域中定义，因此 this 将引用 window 对象而不是函数所在的对象。没有使用 ‘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();

输出：

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

call, apply和bind方法与箭头函数不兼容： 下面是这些方法的概括回顾，以传统函数的示例为例，之后我们将看到它与箭头函数不兼容。

call()方法： 该方法用于调用对象的任何函数，并在函数内部，this将引用传递的对象。
apply()方法： 它的工作方式和call方法类似。在这里，我们不是分别传递参数，而是传递一个参数数组。
bind()方法： 该方法也用于调用对象的任何函数，但它通过绑定对象创建该函数的另一个副本，以供以后使用。

示例： 此示例显示了在Javascript中使用call()、apply()和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");

输出： 因为这指的是箭头函数定义的范围，所以这意味着window对象。这就是为什么call、apply和bind方法不能与箭头函数一起使用的原因。因此，我们只能通过箭头函数来访问window。由于窗口对象中不存在student name和branch属性，因此会打印undefined。

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