JavaScript 中的 const 函数表达式
function
语句声明了一个仅在调用时才执行的函数。本文将讨论 JavaScript 中常量函数表达式的不同用法。
什么是 JavaScript 中的函数声明
函数声明意味着定义一个带有名称
和参数
的函数。让我们创建一个名为 sum
的函数,它将接受两个参数,
function sum(a, b) {
return a + b;
}
声明的函数被提升到全局范围或封闭块的顶部。因此,我们可以在声明之前调用该函数。
console.log('sum(1,2) :', sum(1, 2));
function sum(a, b) {
return a + b;
}
输出:
sum(1,2) :3
在上面的代码中,函数 sum
将在执行代码的第一行之前可用。
什么是 JavaScript 中的函数表达式
函数表达式与函数声明非常相似。唯一的区别是:
- 将函数赋值给一个变量,使用变量名执行函数。
var sumFn1 = function sum(a, b) {
return a + b;
};
console.log('sumFn1(1,3) :', sumFn1(1, 3));
输出:
sumFn1(1,3) :4
- 函数名可以省略。
var sumFn2 = function(a, b) {
return a + b;
};
console.log('sumFn2(1,3) :', sumFn2(1, 3));
输出:
sumFn2(1,3) :4
- 可用于创建自调用函数(Immediately Invoking Function Expression),函数一定义就执行。
(function(a, b) {
return a + b;
})(3, 4); // 7
输出:
7
- 函数表达式在函数被声明之前不会被提升,所以在函数表达式被计算之前我们不能调用函数。
sumFn3(1, 3); // TypeError: sumFn3 is not a function
var sumFn3 = function sum(a, b) {
return a + b;
};
输出:
TypeError: sumFn3 is not a function
- 我们可以使用箭头函数表达式并将其赋值给一个变量。它将使代码更短且更易于理解。
var sumFn4 = (a, b) => a + b;
console.log('sumFn4(10,20) :', sumFn4(10, 20));
输出:
sumFn4(10,20) :30
在 JavaScript 中使用 const
函数表达式
JavaScript ES6 中引入了关键字 const
。
将函数表达式分配给 const
变量可确保函数定义不变,因为你无法更改 const
变量。
var changableSumFn = function(a, b) {
return a + b;
} changableSumFn(2, 3); // 5
// Function definition of a non-constant variable can be changed
changableSumFn = function(a, b) {
return a * b;
} changableSumFn(2, 3); // 6
// using const function expression
const constSumFn = function(a, b) {
return a + b;
} constSumFn(1, 3); // 4
// when we try to chanage const value we will get error
constSumFn = function(a, b) { // TypeError:Assignment to constant variable.
return a * b;
}
输出:
5
6
4
TypeError: Assignment to constant variable.
在上面的代码中,
- 创建一个函数表达式来计算两个值的总和,并将其分配给一个非常量变量
changableSumFn
。 - 为变量
changableSumFn
分配了一个新的函数表达式(它将计算两个值的乘积)。当我们执行changableSumFn
时,会返回两个值的乘积。 - 然后,我们创建了另一个函数表达式并将其分配给一个
const
变量constSumFn
。当我们将一个新的函数表达式分配给constSumFn
变量时,我们将得到TypeError
。
相关文章
Do you understand JavaScript closures?
发布时间:2025/02/21 浏览次数:108 分类:JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间:2025/02/21 浏览次数:178 分类:JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间:2025/02/21 浏览次数:150 分类:JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间:2024/03/24 浏览次数:102 分类:JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间:2024/03/24 浏览次数:180 分类:JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。