Appearance
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 种绑定法则:
- 默认绑定:独立函数调用,
this指向window(严格模式下为undefined)。 - 隐式绑定:通过对象上下文调用(如
obj.foo()),this指向该对象obj。 - 显式绑定:通过
call(),apply(),bind()强制绑定this指向。 new绑定:构造函数通过new调用,this指向新创建的实例对象。- 箭头函数 (
=>):没有自己的this,继承外层词法作用域中的this。
4. 原型与原型链 (Prototype Chain)
在 JavaScript 中,每个函数都有一个 prototype 属性,每个对象都有一个内置的 __proto__ 内部指针。
[ 实例对象 user ] ── __proto__ ──> [ User.prototype ] ── __proto__ ──> [ Object.prototype ] ── __proto__ ──> nullES6 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