JavaScript核心机制与浏览器环境-CSDN博客

本文链接：https://blog.csdn.net/2403_89524622/article/details/148084056

一、JavaScript语法结构解析（重点基础）

1.1 基本组成要素

// 变量声明（ES6+推荐方式）
let name = "Alice";
const PI = 3.1415;
var legacyVar = "old"; // 避免使用

// 运算符与表达式
console.log(10 + "10"); // "1010"（类型转换重点！）
console.log(0.1 + 0.2 === 0.3); // false（浮点精度问题）

// 流程控制
const score = 85;
let result = score >= 90 ? "A" : 
            score >= 80 ? "B" : 
            "C"; // 嵌套三元运算符

重点注意：

变量提升（Hoisting）机制
let/const的块级作用域特性
严格模式下的变化（'use strict'）

1.2 函数与作用域（难点）

// 闭包示例
function createCounter() {
    let count = 0;
    return {
        increment: () => ++count,
        getCount: () => count
    };
}

const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 1

作用域链示意图：

全局作用域
  │
  └─ 函数作用域
        │
        └─ 闭包环境

二、JavaScript对象机制深度剖析

2.1 对象创建方式对比

// 构造函数模式
function Person(name) {
    this.name = name;
}
Person.prototype.sayHello = function() {
    console.log(`Hello, I'm ${this.name}`);
};

// 类语法（ES6+）
class Student extends Person {
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }
}

原型链示意图：

实例 → 构造函数.prototype → Object.prototype → null

2.2 内置对象实战

// Array高级方法
const numbers = [1, 2, 3, 4];
const squared = numbers.map(x => x ** 2); // [1, 4, 9, 16]

// Date对象使用
const now = new Date();
console.log(now.toISOString()); // 标准时间格式

// JSON序列化
const user = { name: "Bob", age: 25 };
const jsonStr = JSON.stringify(user);

三、浏览器环境对象模型（BOM/DOM）

3.1 BOM核心对象

// 窗口控制
window.addEventListener('resize', () => {
    console.log(`Window size: ${window.innerWidth}x${window.innerHeight}`);
});

// 本地存储
localStorage.setItem('theme', 'dark');
const savedTheme = localStorage.getItem('theme');

3.2 DOM操作实践

// 元素选择与操作
const btn = document.querySelector('#submitBtn');
btn.classList.add('active');

// 动态创建元素
const newDiv = document.createElement('div');
newDiv.textContent = "New Element";
document.body.appendChild(newDiv);

四、JavaScript事件系统精要

4.1 事件处理机制

// 标准事件监听
document.getElementById('myBtn').addEventListener('click', function(e) {
    console.log(`Clicked at (${e.clientX}, ${e.clientY})`);
});

// 事件委托示例
document.querySelector('.item-list').addEventListener('click', e => {
    if(e.target.matches('.item')) {
        console.log('Item clicked:', e.target.textContent);
    }
});

事件传播流程：

捕获阶段 → 目标阶段 → 冒泡阶段

4.2 常见事件类型

// 表单验证示例
document.forms[0].addEventListener('submit', e => {
    const email = e.target.email.value;
    if(!/^\w+@\w+\.\w+$/.test(email)) {
        e.preventDefault();
        alert('Invalid email format!');
    }
});

// 滚动事件优化
let isScrolling;
window.addEventListener('scroll', () => {
    clearTimeout(isScrolling);
    isScrolling = setTimeout(() => {
        console.log('Scrolling stopped');
    }, 200);
});

五、综合测试与进阶练习

5.1 原型链分析题

function Animal() {}
function Dog() {}
Dog.prototype = Object.create(Animal.prototype);

const myDog = new Dog();
console.log(myDog instanceof Animal); // 输出结果？

5.2 事件循环挑战

console.log('Start');

setTimeout(() => console.log('Timeout'), 0);

Promise.resolve().then(() => console.log('Promise'));

console.log('End');
// 输出顺序是？