首页
/ 正文

JavaScript 全局属性/函数（保姆级教程）

更新时间: 2025-04-10 14:00:30

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

在 JavaScript 开发中，全局属性和函数是开发者接触频率最高的核心工具之一。它们如同编程世界中的“公共工具箱”，为开发者提供了访问浏览器环境、操作数据、控制执行流程的基础能力。无论是编写简单的网页脚本，还是构建复杂的前端框架，理解全局属性和函数的使用场景与原理，都能显著提升代码的效率和可维护性。本文将从基础概念出发，结合实际案例，深入解析 JavaScript 全局属性和函数的运作逻辑，帮助读者系统掌握这一主题。

全局属性与函数的基础概念

什么是全局属性？

全局属性（Global Properties）是指直接挂载在全局对象（如 window 或 global）上的属性，它们代表了 JavaScript 运行环境的核心信息或功能。例如：

window：浏览器环境中的全局对象，包含浏览器窗口相关的属性和方法。
document：代表当前 HTML 文档的对象，用于操作页面元素。
globalThis：ES2020 引入的标准化全局对象访问器，兼容不同运行环境（如浏览器和 Node.js）。

比喻：可以将全局属性想象为一个房间里的家具——它们是环境固有的组成部分，无需额外“搭建”，开发者可以直接使用。

什么是全局函数？

全局函数（Global Functions）是直接在全局作用域中定义的函数，通常用于执行通用任务。例如：

eval()：执行动态代码的函数。
setTimeout()：延迟执行代码的定时器函数。
JSON.stringify()：将 JavaScript 对象转换为 JSON 字符串的方法。

关键区别：全局属性是“静态值”或“对象”，而全局函数是“可调用的操作”。例如，window.innerHeight 是属性（返回数值），而 setTimeout() 是函数（触发行为）。

常见全局属性详解

1. `globalThis`：跨环境的全局对象访问器

在浏览器中，全局对象是 window；而在 Node.js 中，全局对象是 global。为了统一访问，ES2020 引入了 globalThis。

代码示例：

// 浏览器环境  
globalThis.a = 100;  
console.log(window.a); // 输出：100  

// Node.js 环境  
globalThis.b = 200;  
console.log(global.b); // 输出：200

作用：避免因运行环境不同而需要频繁修改代码，提升代码的可移植性。

2. `window`：浏览器的全局对象

在浏览器中，window 是所有全局属性和函数的“容器”。开发者可以通过它操作浏览器窗口、获取页面信息等。

常用属性与方法：
| 属性/方法 | 说明 |
|----------------------|----------------------------------------|
| window.innerHeight | 返回浏览器窗口的内部高度（像素） |
| window.location | 获取或修改当前页面的 URL 对象 |
| window.confirm() | 显示一个确认对话框，返回用户的选择 |

案例：通过 window.location 实现页面跳转：

function redirectToHomePage() {  
  window.location.href = "https://example.com";  
}

3. `document`：操作 HTML 文档的核心对象

document 对象是浏览器环境中的“页面入口”，用于获取、修改页面元素或样式。

常用方法：

document.getElementById()：通过 ID 查找元素。
document.querySelector()：通过 CSS 选择器查找元素。
document.createElement()：创建新 HTML 元素。

示例：动态修改页面文本：

const element = document.getElementById("my-text");  
element.innerHTML = "Hello, JavaScript!";

核心全局函数的应用场景

1. `setTimeout()` 和 `setInterval()`：控制代码执行时机

这两个函数用于延迟或周期性执行代码，常用于实现动画、轮询或倒计时。

语法：

// 延迟 2 秒后执行  
setTimeout(() => {  
  console.log("两秒后执行！");  
}, 2000);  

// 每 1 秒执行一次  
const intervalId = setInterval(() => {  
  console.log("每秒打印一次");  
}, 1000);  

// 停止定时器  
clearInterval(intervalId);

比喻：setTimeout 像是设置一个“闹钟”，而 setInterval 是设置一个“循环闹钟”。

2. `JSON` 对象的全局方法

JSON.stringify() 和 JSON.parse() 是处理 JSON 数据的常用工具。

代码示例：

// 将 JavaScript 对象转为 JSON 字符串  
const user = { name: "Alice", age: 30 };  
const jsonStr = JSON.stringify(user); // 输出：{"name":"Alice","age":30}  

// 将 JSON 字符串转为 JavaScript 对象  
const parsedUser = JSON.parse(jsonStr);  
console.log(parsedUser.name); // 输出：Alice

3. `eval()`：动态执行代码（慎用）

eval() 可以将字符串作为代码执行，但存在安全风险（如注入攻击），建议仅在必要时使用。

示例：

const code = "console.log('动态执行的代码')";  
eval(code); // 输出：动态执行的代码

全局函数与属性的注意事项

1. 全局变量的污染问题

直接在全局作用域中定义变量或函数，可能导致命名冲突。例如：

// 风险示例  
function calculate() {  
  // ...  
}

如果另一个脚本也定义了 calculate()，就会覆盖原有函数。

解决方案：使用模块化开发（如 ES6 模块）或命名空间模式：

const myApp = {  
  calculate: function() { /* ... */ },  
  // 其他方法  
};

2. 浏览器与 Node.js 的差异

部分全局属性和函数仅在特定环境中可用：

window 和 document 仅存在于浏览器。
Node.js 中可通过 global 访问全局对象，但没有 document。

示例：在 Node.js 中使用 global：

global.isProduction = true; // 设置全局配置

3. 性能与最佳实践

避免频繁调用 eval()，因为它会阻塞主线程并降低性能。
使用 const 或 let 替代全局变量，减少作用域污染。
对于定时器，及时调用 clearTimeout() 或 clearInterval() 避免内存泄漏。

实战案例：构建一个倒计时器

需求分析

实现一个页面倒计时器，显示剩余时间并跳转到指定页面。

实现步骤

使用 document 获取页面元素。
通过 setTimeout 定期更新倒计时。
使用 window.location 实现跳转。

代码实现：

<!-- HTML 结构 -->  
<div id="countdown">10 秒后跳转...</div>

// JavaScript 部分  
function startCountdown(duration, targetUrl) {  
  let remaining = duration;  
  const countdownElement = document.getElementById("countdown");  

  const timerId = setInterval(() => {  
    countdownElement.textContent = `${remaining} 秒后跳转...`;  
    remaining -= 1;  

    if (remaining < 0) {  
      clearInterval(timerId);  
      window.location.href = targetUrl;  
    }  
  }, 1000);  
}  

// 启动倒计时（10 秒后跳转到首页）  
startCountdown(10, "/");

运行效果

页面会每秒更新倒计时文本，10 秒后自动跳转到首页。此案例结合了 document、setInterval 和 window.location 的使用，体现了全局函数和属性的协同作用。

结论

JavaScript 全局属性和函数是开发者构建应用的基石。通过理解这些工具的特性、应用场景和潜在风险，开发者可以更高效地编写健壮、可维护的代码。无论是通过 window 操作浏览器环境，还是利用 setTimeout 控制执行流程，全局属性和函数始终是连接 JavaScript 逻辑与外部环境的桥梁。

在实际开发中，建议遵循以下原则：

最小化全局变量：通过模块化避免命名冲突。
谨慎使用高风险函数：如 eval() 或 with 语句。
善用现代特性：例如 globalThis 替代环境特有对象。

掌握全局属性和函数，不仅能提升代码效率，更能帮助开发者深入理解 JavaScript 的运行机制，为进阶学习打下坚实基础。

JavaScript 全局属性/函数（保姆级教程）

全局属性与函数的基础概念

什么是全局属性？

什么是全局函数？

常见全局属性详解

1. `globalThis`：跨环境的全局对象访问器

2. `window`：浏览器的全局对象

3. `document`：操作 HTML 文档的核心对象

核心全局函数的应用场景

1. `setTimeout()` 和 `setInterval()`：控制代码执行时机

2. `JSON` 对象的全局方法

3. `eval()`：动态执行代码（慎用）

全局函数与属性的注意事项

1. 全局变量的污染问题

2. 浏览器与 Node.js 的差异

3. 性能与最佳实践

实战案例：构建一个倒计时器

需求分析

实现步骤

运行效果

结论

最新发布

jQuery.each()方法（长文解析）

jQuery.extend()方法（长文解析）

jQuery.fn.extend()方法（千字长文）

jQuery.globalEval()方法（长文讲解）

jQuery.grep() 方法（长文讲解）

jQuery.inArray() 方法（长文讲解）

jQuery.isArray() 方法（手把手讲解）

jQuery.isEmptyObject() 方法（千字长文）

jQuery.isFunction() 方法（建议收藏）

jQuery.isNumeric() 方法（手把手讲解）

JavaScript 全局属性/函数（保姆级教程）

全局属性与函数的基础概念

什么是全局属性？

什么是全局函数？

常见全局属性详解

1. globalThis：跨环境的全局对象访问器

2. window：浏览器的全局对象

3. document：操作 HTML 文档的核心对象

核心全局函数的应用场景

1. setTimeout() 和 setInterval()：控制代码执行时机

2. JSON 对象的全局方法

3. eval()：动态执行代码（慎用）

全局函数与属性的注意事项

1. 全局变量的污染问题

2. 浏览器与 Node.js 的差异

3. 性能与最佳实践

实战案例：构建一个倒计时器

需求分析

实现步骤

运行效果

结论

最新发布

jQuery.each()方法（长文解析）

jQuery.extend()方法（长文解析）

jQuery.fn.extend()方法（千字长文）

jQuery.globalEval()方法（长文讲解）

jQuery.grep() 方法（长文讲解）

jQuery.inArray() 方法（长文讲解）

jQuery.isArray() 方法（手把手讲解）

jQuery.isEmptyObject() 方法（千字长文）

jQuery.isFunction() 方法（建议收藏）

jQuery.isNumeric() 方法（手把手讲解）

1. `globalThis`：跨环境的全局对象访问器

2. `window`：浏览器的全局对象

3. `document`：操作 HTML 文档的核心对象

1. `setTimeout()` 和 `setInterval()`：控制代码执行时机

2. `JSON` 对象的全局方法

3. `eval()`：动态执行代码（慎用）