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

作者：青柠时间：2026-10-25 15:46:24浏览：187

本文详解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

作者最新文章

JS读取本地文件时报错或无响应的常见原因

2026-11-05 16:32:31

let、const与var的区别：JavaScript变量声明最佳实践

2026-11-05 14:16:38

JS中直接定义静态二维数组的字面量写法

2026-11-05 14:16:08

JS 怎么查找字符串中所有匹配项的位置

2026-11-05 14:15:53

JavaScript新手常犯的编码错误与最佳实践指南

2026-11-04 22:12:38