JavaScript函数如何定义和调用？JavaScript箭头函数有什么特点？

在 javascript 中，普通函数和箭头函数的主要区别在于 this 的绑定方式及其他语法特性。一、普通函数可通过函数声明、函数表达式或构造函数定义，其中函数声明会被提升，调用时使用函数名加括号；二、箭头函数使用 () => {} 语法，更简洁且不绑定自己的 this，而是继承外层作用域的 this，因此不能作为构造函数使用；三、建议在无需绑定 this 的场景如数组方法或简单回调中使用箭头函数，而在需要访问对象自身时使用普通函数以确保 this 指向正确。

在 JavaScript 中，函数是程序的基本构建块之一。定义和调用函数的方式有多种，其中最常见的是普通函数和箭头函数。两者都能完成任务，但在使用上有一些关键区别。

一、如何定义和调用普通函数？

JavaScript 中定义函数主要有三种方式：函数声明、函数表达式和构造函数方式。

• 函数声明是最常见的形式：

function sayHello() {
  console.log("你好");
}

这种方式会在代码执行前被“提升”（hoisted），也就是说即使你在调用之后才写函数定义，也能正常运行。

立即学习“Java免费学习笔记（深入）”；

• 函数表达式是将函数赋值给一个变量：

const sayHi = function() {
  console.log("嗨");
};

这种写法不会被提升，必须先定义再调用。

• 构造函数方式不太常用，但也能创建函数：

const add = new Function('a', 'b', 'return a + b');

虽然灵活，但性能较差，一般不推荐使用。

调用这些函数的方式都是一样的，比如 sayHello() 或 sayHi()。

二、箭头函数有什么特点？

ES6 引入了箭头函数，它简化了函数的写法，并且有几个显著的特点。

阿里云-虚拟数字人

阿里云-虚拟数字人是什么？ ...

2

查看详情

• 更简洁的语法：省去了 function 关键字，使用 => 符号：

const greet = () => console.log("欢迎");

如果只有一个参数，括号也可以省略：

const showName = name => console.log(name);

• 没有自己的 this：这是箭头函数最重要的特性。它不会创建自己的 this 上下文，而是继承自外层作用域。这在事件回调或方法中特别有用，避免了手动绑定 this。

例如：

const user = {
  name: "张三",
  sayName: () => {
    console.log(this.name); // undefined
  }
};

上面的例子中，sayName 是箭头函数，它的 this 指向全局对象（浏览器中是 window），而不是 user 对象，所以输出为 undefined。

• 不能作为构造函数：箭头函数不能通过 new 调用，否则会报错。

三、什么时候该用箭头函数？

箭头函数适合用于那些不需要自己 this 的场景，比如数组的方法（map、filter 等）或者简单的回调函数。

比如：

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);

但如果是在对象的方法中需要访问对象本身，那就应该使用普通函数：

const counter = {
  count: 0,
  increment: function() {
    this.count++;
  }
};

换成箭头函数的话，this 就不是指向 counter 了，反而可能出错。

基本上就这些。函数定义和调用看似简单，但理解它们之间的差异对写出稳定可靠的代码非常重要。

以上就是JavaScript函数如何定义和调用？JavaScript箭头函数有什么特点？的详细内容，更多请关注php中文网其它相关文章！