JS 逆向基础篇：JS作用域和浏览器对象属性补环境

🌐 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

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 环境中模拟和测试浏览器对象的功能，进行前端和服务器端的协作开发。