🌐 JavaScript 逆向基础篇
JavaScript 是一种广泛应用于浏览器端的脚本语言，其强大的功能使得前端开发和逆向工程变得更加灵活和高效。以下是对 JavaScript 的作用域、变量作用域、高阶语法以及浏览器对象属性的详细解析，并介绍如何在 Node.js 环境中模拟这些功能。
🧩 JavaScript 作用域
JavaScript 中的作用域决定了变量的可访问性和生命周期。理解作用域是有效编写和调试 JavaScript 代码的关键。
全局作用域
全局作用域指的是在整个程序中都可以访问的作用域。全局变量在任何函数外部声明，并且在整个程序中都是可用的。
var globalVar = "I am a global variable"; function checkGlobal() { console.log(globalVar); // 可以访问到 globalVar } checkGlobal(); // 输出: I am a global variable
局部作用域
局部作用域是指在函数内部声明的变量只在该函数内有效，外部无法访问。这种作用域限制了变量的生命周期和作用范围。
function localScope() { var localVar = "I am a local variable"; console.log(localVar); // 可以访问到 localVar } localScope(); // 输出: I am a local variable console.log(localVar); // 报错: localVar is not defined
块级作用域
块级作用域是指在代码块（由大括号 {} 包围的区域）内部声明的变量仅在该块内有效。let 和 const 关键字提供了块级作用域。
if (true) { let blockVar = "I am a block-level variable"; console.log(blockVar); // 输出: I am a block-level variable } console.log(blockVar); // 报错: blockVar is not defined
🏗️ JavaScript 高阶语法
高阶语法指的是 JavaScript 提供的一些高级功能和特性，这些特性允许开发者编写更加灵活和强大的代码。
函数作为一等公民
在 JavaScript 中，函数是第一类对象，可以被赋值给变量、作为参数传递以及作为返回值返回。
// 函数作为变量 const greet = function(name) { return `Hello, ${name}!`; }; // 函数作为参数 function executeFunction(fn, arg) { return fn(arg); } console.log(executeFunction(greet, 'Alice')); // 输出: Hello, Alice!
闭包（Closure）
闭包是指函数和其词法环境的组合，允许函数访问其外部函数的变量。
function makeCounter() { let count = 0; return function() { count += 1; return count; }; } const counter = makeCounter(); console.log(counter()); // 输出: 1 console.log(counter()); // 输出: 2
Promise 和异步编程
Promise 对象表示异步操作的最终完成（或失败）及其结果值。使用 Promise 可以更好地处理异步操作。
const asyncTask = () => { return new Promise((resolve, reject) => { setTimeout(() => resolve("Task completed"), 1000); }); }; asyncTask().then(result => { console.log(result); // 输出: Task completed });
🌍 浏览器对象属性详细解析
浏览器提供了丰富的对象属性，使得 JavaScript 可以控制和操作网页内容及浏览器行为。以下是对 window、document、navigator、location 和 canvas 对象的详细解析。
window 对象
window 对象代表浏览器窗口，提供了访问浏览器功能的方法和属性。
window.alert(message): 显示一个警告框，包含指定的消息文本。
window.alert("This is an alert box!");
window.innerWidth和window.innerHeight: 返回浏览器窗口的内宽和内高。
console.log(window.innerWidth); // 输出浏览器窗口的宽度 console.log(window.innerHeight); // 输出浏览器窗口的高度
window.setTimeout(callback, delay): 在指定的延迟后执行一次callback函数。
window.setTimeout(() => { console.log("Executed after 2 seconds"); }, 2000);
window.location: 返回一个Location对象，包含当前文档的 URL，并提供方法来改变 URL。
console.log(window.location.href); // 输出当前页面的 URL window.location.href = "https://www.example.com"; // 导航到新 URL
document 对象
document 对象表示当前的 HTML 文档，并提供了操作网页内容的方法和属性。
document.getElementById(id): 返回具有指定 ID 的元素。
const header = document.getElementById('header'); header.innerText = "Updated Header Text";
document.createElement(tagName): 创建一个新的 HTML 元素。
const newDiv = document.createElement('div'); newDiv.innerText = "This is a new div"; document.body.appendChild(newDiv);
document.querySelector(selector): 返回第一个匹配指定 CSS 选择器的元素。
const firstButton = document.querySelector('button'); firstButton.style.backgroundColor = "blue";
document.querySelectorAll(selector): 返回所有匹配指定 CSS 选择器的元素集合。
const allButtons = document.querySelectorAll('button'); allButtons.forEach(button => button.style.color = "red");
navigator 对象
navigator 对象包含有关浏览器的信息，如用户代理、浏览器版本和操作系统。
navigator.userAgent: 返回用户代理字符串，描述浏览器和操作系统的信息。
console.log(navigator.userAgent); // 输出用户代理字符串
navigator.platform: 返回浏览器运行的平台。
console.log(navigator.platform); // 输出操作系统平台
navigator.language: 返回浏览器的语言设置。
console.log(navigator.language); // 输出浏览器语言
location 对象
location 对象提供有关当前 URL 的信息，并允许修改它。
location.href: 获取或设置整个 URL。
console.log(location.href); // 输出当前页面的 URL location.href = "https://www.example.com"; // 导航到新 URL
location.protocol: 返回 URL 的协议部分。
console.log(location.protocol); // 输出 URL 的协议（例如：http:）
location.hostname: 返回 URL 的主机名部分。
console.log(location.hostname); // 输出主机名
location.search: 返回 URL 的查询部分（即问号后的部分）。
console.log(location.search); // 输出查询字符串
canvas 对象
canvas 对象用于绘制图形，支持 2D 和 WebGL 渲染。
canvas.getContext('2d'): 返回一个 2D 绘图上下文，用于绘制图形。
<canvas id="myCanvas" width="500" height="500"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'blue'; ctx.fillRect(10, 10, 150, 100); ctx.beginPath(); ctx.arc(200, 200, 50, 0, 2 * Math.PI); ctx.stroke(); </script>
ctx.drawImage(image, x, y): 在画布上绘制图像。
const img = new Image(); img.src = 'path/to/image.png'; img.onload = () => { ctx.drawImage(img, 50, 50); };
🛠️ 在 Node.js 环境中模拟浏览器对象属性
由于 Node.js 是一个服务器端环境，不提供浏览器对象如 window、document 等，模拟这些对象可以使用一些库和工具。以下是如何在 Node.js 环境中模拟这些功能的方法：
1. 安装所需的库
使用 npm 或 yarn 安装需要的库，如 jsdom 和 canvas，这些库可以用来模拟浏览器对象。
npm install jsdom canvas • 1
2. 使用 `
jsdom模拟document和window` 对象
jsdom 是一个用于模拟浏览器环境的 JavaScript 库，允许在 Node.js 中使用 document 和 window 对象。
const { JSDOM } = require('jsdom'); const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`); const document = dom.window.document; const window = dom.window; // 访问和操作 document 对象 console.log(document.querySelector('p').textContent); // 输出: Hello world // 修改 document 对象 document.querySelector('p').textContent = 'Updated text'; console.log(document.querySelector('p').textContent); // 输出: Updated text
3. 使用 canvas 模拟绘图功能
canvas 库提供了在 Node.js 中进行图形绘制的功能。
const { createCanvas } = require('canvas'); const canvas = createCanvas(500, 500); const ctx = canvas.getContext('2d'); // 绘制矩形 ctx.fillStyle = 'blue'; ctx.fillRect(10, 10, 150, 100); // 绘制圆形 ctx.beginPath(); ctx.arc(200, 200, 50, 0, 2 * Math.PI); ctx.stroke(); // 保存绘图到文件 const fs = require('fs'); const out = fs.createWriteStream('out.png'); const stream = canvas.createPNGStream(); stream.pipe(out); out.on('finish', () => console.log('The PNG file was created.'));
通过这些方法，你可以在 Node.js 环境中模拟和测试浏览器对象的功能，进行前端和服务器端的协作开发。
![[JS]作用域的“生产者”——词法作用域](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635708/20241110/80ecbe830d6b4b6e88b4a7647ef36a9b.png?x-oss-process=image/resize,h_160,m_lfit)