为什么我可以在 JavaScript / TypeScript 中声明变量之前使用它？答案

【问题标题】：Why can I use a variable before declaring it in JavaScript / TypeScript?为什么我可以在 JavaScript / TypeScript 中声明变量之前使用它？
【发布时间】：2020-09-29 14:50:21
【问题描述】：

据我了解，在 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。

我的问题是：为什么它仍然有效？

【问题讨论】：

因为该代码不会从上到下逐行执行。 App 构造函数是最后被调用的东西之一......
当你调用App()时，styles已经定义好了。
虽然编译它不像其他语言，例如C++，编译器不识别变量，直到它们在文档中从上到下声明，变量才被认为是在程序中使用在运行时调用函数。

标签： javascript reactjs typescript react-native

【解决方案1】：

基本上正在发生的事情是

const styles = StyleSheet.create({});

已被声明为调用函数。所以在声明函数运行时，变量被赋值为对象；

const App = () => {return()};

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

【讨论】：

【解决方案2】：

在声明之前，您没有使用它。

只有在其内部使用的函数被调用之后，该变量才会被使用。

【讨论】：