JS函数如何定义_JavaScript函数定义与调用方法完整教程

javaScript中函数是执行任务的代码块,可通过多种方式定义并调用。1. 函数声明使用function关键字,会被提升,可在声明前调用;2. 函数表达式将函数赋值给变量,不会被提升,必须先定义后调用;3. 箭头函数为es6简洁语法,无自身this,不适用构造函数;4. 构造函数方式用Function构造器创建,性能差且不安全,不推荐。函数可通过普通调用、立即执行(IIFE)、回调、对象方法等方式使用,日常推荐函数声明和箭头函数,注意this指向问题。

JS函数如何定义_JavaScript函数定义与调用方法完整教程

javascript 中的函数是执行特定任务的代码块,可以通过定义后多次调用。掌握函数的定义与调用方式,是学习 js 的基础。下面详细介绍几种常见的函数定义方法及其调用方式。

1. 函数声明(Function Declaration)

这是最传统的函数定义方式,使用 function 关键字,后面跟函数名和括号中的参数。

 function greet(name) {   return "Hello, " + name + "!"; } 

这种函数会在代码执行前被“提升”(hoisted),意味着你可以在声明之前调用它:

 console.log(greet("Alice")); // 输出: Hello, Alice! function greet(name) {   return "Hello, " + name + "!"; } 

2. 函数表达式(Function Expression)

将函数赋值给一个变量,称为函数表达式。函数本身可以有名字,但通常省略(匿名函数)。

立即学习Java免费学习笔记(深入)”;

 const add = function(a, b) {   return a + b; }; 

注意:函数表达式不会被提升,必须在定义之后调用:

 // 错误:add is not a function console.log(add(2, 3)); const add = function(a, b) {   return a + b; }; 

3. 箭头函数(Arrow Function)

ES6 引入的简洁语法,适合写简短的函数,特别常用于回调。

 const multiply = (x, y) => x * y; <p>const sayHi = () => "Hi there!";</p>                     <div class="aritcle_card">                         <a class="aritcle_card_img" href="/ai/1116">                             <img src="https://img.php.cn/upload/ai_manual/001/246/273/68b6d8ab88a2f243.png" alt="通义视频">                         </a>                         <div class="aritcle_card_info">                             <a href="/ai/1116">通义视频</a>                             <p>通义万相AI视频生成工具</p>                             <div class="">                                 <img src="/static/images/card_xiazai.png" alt="通义视频">                                 <span>70</span>                             </div>                         </div>                         <a href="/ai/1116" class="aritcle_card_btn">                             <span>查看详情</span>                             <img src="/static/images/cardxiayige-3.png" alt="通义视频">                         </a>                     </div>                 <p>const logName = name => console.log("Name:", name);</p>

箭头函数没有自己的 this,适合在对象方法或事件处理中谨慎使用。它也不能用作构造函数。

4. 构造函数方式(不推荐)

使用 Function 构造器动态创建函数,语法如下:

 const power = new Function('a', 'b', 'return a ** b;'); 

这种方式性能较差,且容易引发安全问题(类似 eval),一般不推荐使用。

函数的调用方法

定义函数后,通过函数名加括号来调用:

  • 普通调用: greet("Bob")
  • 立即执行函数(IIFE): 在定义后立刻运行
  •    (function() {     console.log("This runs immediately");   })();   

  • 作为回调函数 传给其他函数使用
  •    setTimeout(() => console.log("Delayed message"), 1000);   

  • 对象方法调用: 定义在对象中的函数
  •    const user = {     name: "Tom",     introduce() {       console.log("I'm " + this.name);     }   };   user.introduce(); // 输出: I'm Tom   

基本上就这些。函数定义方式各有用途,日常开发推荐使用函数声明和箭头函数,注意作用域和 this 的差异即可。

上一篇
下一篇
text=ZqhQzanResources