Skip to content

JavaScript 语言核心基础与面向对象进阶

本文系统梳理 JavaScript (ECMAScript) 的核心语法、数据类型、变量作用域、函数闭包机制、原型链及 ES6 面向对象继承体系。

1. 数据类型与变量机制

JavaScript 是一门弱类型、动态类型的脚本语言。数据类型分为 基本数据类型引用数据类型

分类包含类型存储位置传值方式
基本数据类型String, Number, Boolean, Null, Undefined, Symbol, BigInt栈内存 (Stack)按值传递 (Pass by Value)
引用数据类型Object, Array, Function, Date, RegExp堆内存 (Heap)按引用地址传递 (Pass by Reference)

变量声明区别:var vs let vs const

  • var:函数作用域,存在变量提升 (Hoisting),允许重复声明。
  • let:块级作用域 ({} 块),不存在变量提升,存在暂时性死区 (TDZ),不允许重复声明。
  • const:块级作用域,声明时必须初始化,且变量引用不可改变(引用类型内部属性可修改)。

2. 函数与闭包 (Closure)

2.1 闭包的定义与底层原理

闭包 (Closure) 是指有权访问另一个函数作用域中变量的函数。即使外部函数已经执行完毕并弹出调用栈,闭包依然能记住并访问其外层词法环境中的变量。

javascript
function createCounter() {
    let count = 0; // 被闭包引用的私有变量
    return {
        increment() {
            count++;
            return count;
        },
        getCount() {
            return count;
        }
    };
}

const counter = createCounter();
console.log(counter.increment()); // 输出: 1
console.log(counter.increment()); // 输出: 2
console.log(counter.getCount());  // 输出: 2
  • 应用场景:数据私有化与封装、单例模式、函数防抖 (Debounce) 与节流 (Throttle)。
  • 注意事项:谨慎滥用闭包,未及时释放的引用可能导致内存泄露。

3. this 绑定规则与改变指针

this 的绑定在函数调用时确定(除了箭头函数外),主要遵循 4 种绑定法则:

  1. 默认绑定:独立函数调用,this 指向 window(严格模式下为 undefined)。
  2. 隐式绑定:通过对象上下文调用(如 obj.foo()),this 指向该对象 obj
  3. 显式绑定:通过 call(), apply(), bind() 强制绑定 this 指向。
  4. new 绑定:构造函数通过 new 调用,this 指向新创建的实例对象。
  5. 箭头函数 (=>):没有自己的 this,继承外层词法作用域中的 this

4. 原型与原型链 (Prototype Chain)

在 JavaScript 中,每个函数都有一个 prototype 属性,每个对象都有一个内置的 __proto__ 内部指针。

[ 实例对象 user ] ── __proto__ ──> [ User.prototype ] ── __proto__ ──> [ Object.prototype ] ── __proto__ ──> null

ES6 class 与继承

javascript
class Parent {
    constructor(name) {
        this.name = name;
    }
    sayName() {
        return `Hello, ${this.name}`;
    }
}

class Child extends Parent {
    constructor(name, age) {
        super(name); // 调用父类构造函数
        this.age = age;
    }
    getDetails() {
        return `${super.sayName()}, age is ${this.age}`;
    }
}

const child = new Child("Alice", 18);
console.log(child.getDetails()); // 输出: Hello, Alice, age is 18

基于 VitePress 构建 | 技术知识库