当前位置：首页 > article >正文

TypeScript中function和const定义函数的区别

article 2024/11/29 18:01:48

在 JavaScript/TypeScript 中，函数定义的不同方式会影响它的 作用域、可见性 和行为。你提到的两种定义方式：

使用 function 关键字：

function onCalibrationOk(values: CalibrationInfo) {
  // 函数体
}

使用 const 定义函数表达式：

const onCalibrationOk = (values: CalibrationInfo) => {
  // 函数体
};

它们之间主要有以下几个区别：

1. 函数声明 (`function`) 与函数表达式 (`const`)

函数声明 (function)：
- 直接使用 function 关键字定义一个函数。
- 函数声明在其所在的作用域中被提升（Hoisting），这意味着即使函数声明在代码的后面，它在作用域内的前面就已经可以使用了。
- 例如：
```
sayHello(); // 可以正常调用，尽管它在代码后面被声明

function sayHello() {
  console.log("Hello");
}
```
函数表达式 (const)：
- 使用 const 定义的函数表达式通常是匿名的（没有名字），然后赋值给一个变量。
- 函数表达式 不会被提升，它只有在代码执行到赋值语句之后才可以使用。
- 例如：
```
sayHello(); // 这里会报错：Cannot access 'sayHello' before initialization

const sayHello = function () {
  console.log("Hello");
};
```

2. 作用域和 `this` 绑定行为

函数声明 (function)：
- 使用 function 关键字定义的函数，其 this 取决于调用的上下文。
- 当函数是作为对象的属性调用时，this 通常指向调用函数的对象；但如果是直接调用，this 可能会指向全局对象（在严格模式下是 undefined）。
- 例如：
```
function showThis() {
  console.log(this);
}

showThis(); // 在非严格模式下会打印全局对象（如浏览器中为 window），严格模式下打印 undefined
```

箭头函数 (const + =>)：

使用箭头函数 (=>) 的函数表达式不会有自己的 this，它的 this 总是继承自其外部作用域。
这使得箭头函数在回调和闭包中非常方便，避免了使用传统函数时 this 可能出现的指向问题。

例如：

const obj = {
  outerThis: this,
  showThis: () => {
    console.log(this); // 输出值由外部作用域的 this 决定，通常为 undefined 或全局对象
  }
};

obj.showThis(); // 箭头函数中的 this 继承自定义函数时所在的作用域

3. `undefined` 的输入

你提到输入显示 undefined，这可能是由多种原因引起的：

values 传入错误：
- 在调用 onCalibrationOk 时，如果没有正确传入表单的数据，values 可能会是 undefined。例如，当你调用 onCalibrationOk() 时，并没有传入任何参数，这会导致 values 显示为 undefined。
函数声明提升的影响：
- 如果你使用 function 关键字定义函数，但在函数声明前就调用了它，可能导致引用错误或者意料之外的行为。虽然函数声明会被提升，但要确保上下文中调用是合理的。
箭头函数和 this 的绑定问题：
- 如果你在箭头函数中访问了 this，而这个 this 没有正确绑定，可能会导致数据丢失。尤其是在与 React 的 Form 结合使用时，确保上下文中使用的是正确的 this。