为什么在JavaScript / TypeScript中可以在声明前使用变量？

Question

据我所知，在ES6和let、const引入后，使用它们声明的变量必须在使用前先声明。然而，我遇到了许多例子，在这些例子中，当我在使用之后声明变量时，我的代码仍然可以正常运行。例如，以下是React Native TypeScript模板（简化版）的代码：

import React from 'react';
import {StyleSheet, Text} from 'react-native';

const App = () => {
  return (
    <>
      <Text style={styles.text}>Some text</Text>
    </>
  );
};

const styles = StyleSheet.create({
  text: {
    backgroundColor: 'blue',
  },
});

export default App;

在这里，styles在使用后被声明，甚至看起来这是惯用的方法，但即使ESLint将其标记为no-use-before-define，它仍然可以工作。

我的问题是：为什么它仍然可以工作？

- Guillermo

---

因为代码不是按照自上而下逐行执行的。App构造函数是最后被调用的之一... - Cerbrus

当你调用App()时，styles已经被定义。 - deceze

尽管编译后的代码与其他语言（如C++）不同，编译器并不会在文档从上到下声明变量之前就识别它们。只有在程序运行时调用函数时，变量才被视为已使用。 - QuentinUK

Answer 1

在声明之前你没有使用它。

变量直到调用内部的函数才被使用。

- Quentin

Answer 2

基本上正在发生的是：

声明了一个名为`styles`的常量，它被赋予了一个对象。这个声明实际上是一个被称为“调用函数”的函数。因此，在声明时，该函数被运行，变量被分配了对象；

声明`App`将成为一个函数，当它从主进程执行时，它的构造函数将被调用，目前你只是从模块中导出它。所以在导出点，`Styles`已经被声明为返回的对象，而`App`则已经被声明等待未来的执行。

- Simon Hodson