JavaScript定义函数的三种核心方法详解

作者:青柠

时间:2026-10-25

浏览:186

本文详解JavaScript中定义函数的三种主要方式:函数声明、函数表达式以及Function()构造函数。重点解析函数提升(Hoisting)机制对声明与表达式的影响,探讨匿名函数与自调用函数的应用,并说明函数作为对象在JavaScript中的特性及属性方法使用。

文章目录

JavaScript函数定义基础

在JavaScript中,定义函数主要依赖关键字 。

函数的创建方式主要分为两种:一种是函数声明,另一种是函数表达式。

函数声明

关于函数声明,其基本语法结构如下所示:


function functionName(parameters) {
执行的代码
}

函数声明在代码中定义后并不会立即执行,而是等待被调用时才会运行。具体示例如下:


function myFunction(a, b) {
return a * b;
}

函数表达式

接下来介绍函数表达式。

JavaScript允许通过表达式来定义函数,这种函数可以直接赋值给变量。

具体实现方式是将函数表达式存储在一个变量中,示例如下:


var x = function (a, b) {return a * b};

当函数表达式被赋值给变量后,该变量即可像函数一样被调用执行。示例如下:


var x = function (a, b) {return a * b};
var z = x(4, 3);

上述案例中的函数属于匿名函数,即没有具体名称。由于通过变量存储,调用时通常直接使用变量名即可。

Function构造函数

Function() 构造函数 在以上实例中,我们了解到函数通过关键字 function 定义。 函数同样可以通过内置的 JavaScript 函数构造器(Function())定义。


var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);

实际上,日常开发中无需强制使用构造函数,前文提到的实例可以直接简化为:


var myFunction = function (a, b) {return a * b}
var x = myFunction(4, 3);

函数提升与自调用

这里涉及一个关键概念:函数提升(Hoisting)。在JavaScript中,当前作用域内的声明会被提升到前面,这适用于变量和函数声明。因此,即使在声明之前调用函数,也能正常工作。示例如下:


myFunction(5);

function myFunction(y) {
  return y * y;
}

需要注意的是,使用表达式定义的函数无法进行提升。此外,函数表达式支持“自调用”,即表达式后紧跟 即可自动执行。声明式的函数不能自调用,若需自调用,需通过添加括号表明其为函数表达式。示例如下:


(function () {
  var x = "Hello!!";   // 我将调用自己
})();

自调用函数的写法还有多种变体,例如:


!function(){}();
+function(){}();
-function(){}();
~function(){}();
~(function(){})();
void function(){}();
(function(){}());

在实际开发中,第一种写法最为常见。

函数作为对象

上述自调用函数实际上是一个匿名自我调用函数,没有具体的函数名。此外,函数还可以作为普通值使用,例如:


function myFunction(a, b) {
  return a * b;
}

var x = myFunction(4, 3);

JavaScript函数也可以参与表达式运算,示例如下:


function myFunction(a, b) {
  return a * b;
}

var x = myFunction(4, 3) * 2;

在JavaScript中,使用 操作符判断函数类型会返回 。尽管返回值为字符串,但从概念上讲,将JavaScript函数视为对象更为准确。JavaScript函数具备属性和方法,例如 属性用于返回函数调用时接收到的参数个数。示例如下:


function myFunction(a, b) {
  return arguments.length;
}

此外, 方法可将函数转换为字符串形式返回。示例如下:


function myFunction(a, b) {
  return a * b;
}

var txt = myFunction.toString();

当函数定义作为对象的属性时,被称为对象方法;若函数用于创建新对象,则称为对象的构造函数。

以下是各种方法的具体示例代码:


<html> 
<head></head> 
<body> 
<script type="text/javascript"> 
/*javascript定义函数(声明函数)可以有三种方法:正常方法、构造函数、函数直接量。*/ 
/*1.正常方法 function(param){}*/ 
function print(msg) 
{ 
document.write(msg,"<br/>"); 
} 
/*如果函数不包含return 语句,只执行函数体内语句,并返回undefined*/ 
/*2.构造函数方法:new Function()*/ 
var add1=new Function('a','b','return a+b'); 
/*3.函数直接量法,创建未命名函数,*/ 
var result = function(x,y){return x+y;}; 
/*也可以指定函数名*/ 
var result2 = function fact(x){if(x<1) return 1;else return x*fact(x-1)}; 
document.write('调用一般的方法:'); 
print("<hr/>"); 
print('调用构造函数方法:add1(5,6)'); 
print(add1(5,6)); 
print("<hr/>"); 
print("调用函数直接量法:result(3,4)"); 
var re =result(3,4); 
print(re); 
print("调用函数直接量法:result2(3)"); 
print(result2(3)); 
print("<hr/>"); 
print('函数作为数据使用'); 
/*函数可以作为数据使用*/ 
function add(x,y){return x+y;} 
function subtract(x,y){return x-y;} 
function multiply(x,y){return x*y;} 
function divide(x,y){return x/y;} 
function operate(operator,operand1,operand2) 
{ 
return operator(operand1,operand2); 
} 
//计算(2+3) + (4*5) 
var i = operate(add,operate(add,2,3),operate(multiply,4,5)); 
print('(2+3) + (4*5)='+i); 
print("<hr/>"); 
//使用函数直接量 
var operators = new Object(); 
operators['add'] = function(x,y){return x+y;} 
operators['substract'] = function(x,y){return x-y;} 
operators['multiply'] = function(x,y){return x*y;} 
operators['divide'] = function(x,y){return x/y;} 
operators['pow'] = Math.pow; 
function operate2(op_name,operand1,operand2) 
{ 
if(operators[op_name] == null) return "unknown operator"; 
else return operators[op_name](operand1,operand2); 
} 
//定义"hello" + "" + "world" 
var j = operate2("add","hello",operate2("add"," ","world")); 
var k = operate2("pow",10,2); 
print(j); 
print(k); 
print("<hr/>"); 
</script> 
</body> 
</html> 

运行上述代码后的结果如下: 调用一般方法: -------------------------------------------------------------------------------- 调用构造函数方法:add1(5,6) 11 -------------------------------------------------------------------------------- 调用函数直接量法:result(3,4) 7 调用函数直接量法:result2(3) 6 -------------------------------------------------------------------------------- 函数作为数据使用 (2+3) + (4*5)=25 -------------------------------------------------------------------------------- hello world 100

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章