React Native函数组件内函数为何变为全局作用域？

问题场景 #

以下是两段代码示例：

file1.js #

const Home = () => {
  sayHello = () => {
    console.log("Say Hello from Home")
  }
}

export default Home;

file2.js #

const Settings = () => {
  sayHello()
}

export default Settings;

疑问：为什么sayHello()函数能在Settings组件中被访问到？

核心原因 #

你在Home组件里定义sayHello时，没有使用const、let或var声明变量。在JavaScript中，未声明就直接赋值的变量会被自动挂载到全局对象上（浏览器环境是window，Node.js环境是global），从而变成全局可用的函数。这种行为属于JS的隐式全局变量机制，会导致作用域泄漏，让原本应该局限在组件内部的函数被其他模块访问到。

修复方法 #

1. 限制函数作用域到组件内部 #

给sayHello添加const或let声明，将其限定在Home组件的局部作用域内，这样其他组件就无法访问它：

const Home = () => {
  const sayHello = () => {
    console.log("Say Hello from Home")
  }
}

export default Home;

2. 提取为可复用的模块（如果需要跨组件使用） #

如果sayHello需要在多个组件中调用，建议把它单独抽离到工具模块中导出，通过显式导入的方式使用，避免全局污染：

// utils.js
export const sayHello = () => {
  console.log("Say Hello from Home")
}

// Home.js
import { sayHello } from './utils';
const Home = () => {
  // 组件内使用sayHello
}

// Settings.js
import { sayHello } from './utils';
const Settings = () => {
  sayHello()
}

内容的提问来源于stack exchange，提问作者BalaramNayak