JavaScript 核心基础知识点梳理与代码示例

变量作用域与生命周期

在 JavaScript 中，变量的作用域取决于其声明位置及是否使用 var 关键字。明确作用域有助于避免命名冲突和内存泄漏。

第1步：区分全局变量与局部变量

目的：理解变量在不同代码块中的可见性。
规则：

• 全局变量：定义在函数之外的变量；或在函数内部未使用 var 声明的变量。
• 局部变量：在函数内部使用 var 显式声明的变量，仅在该函数作用域内有效。

var global = "Global"; // 全局变量
test();

function test(){
  var local = "Local"; // 局部变量
  document.writeln(global); // 输出: Global
  document.writeln(local);  // 输出: Local
}

document.writeln(global);   // 输出: Global
document.writeln(local);    // 报错: local is not defined

第2步：理解隐含对象 arguments

每个函数内部都有一个隐含的对象 arguments，它表示传递给函数的实际参数列表。arguments.length 返回实际传递的参数个数，而函数对象的 .length 属性则代表函数期望接受的参数个数（即形参数量）。两者不同，注意区分。

数据类型与运算符

第1步：掌握五种原始数据类型

JavaScript 包含以下五种基本数据类型：Undefined、Null、Boolean、Number 和 String。需要注意的是，JS 中没有单独的 char 类型，字符也归为 String。

第2步：使用 typeof 运算符

typeof 是一元运算符，用于检测变量的数据类型。返回值包括：undefined、boolean、number、string 和 object（函数也被识别为 object，或使用 function 标识）。

第3步：理解 null 与 undefined 的关系

null 和 undefined 在值相等比较时视为相等，但语义不同。undefined 表示变量已声明但未赋值，null 表示有意将变量赋值为“空”。

alert(undefined == null); // 浏览器返回 true

第4步：强制类型转换

JavaScript 提供三种强制类型转换方法：Boolean(value)、Number(value) 和 String(value)，可用于将任意类型转换为对应的基本类型。

Cookie 机制简介

Web 开发中常涉及两种类型的 Cookie，需根据需求选择存储策略：

1. 持久性 Cookie：数据被保存到客户端硬盘上，关闭浏览器后依然存在，直到过期或被删除。
2. 会话 Cookie：存储在浏览器进程的内存中，当浏览器关闭时自动销毁，常用于临时状态管理。

对象模型与创建方式

第1步：认识 Object 与 Window 对象的枚举性

所有对象都从 Object 继承。Object 本身的属性通常不能枚举（propertyIsEnumerable("prototype") 返回 false），而 window 对象的属性是可以枚举的，可通过 for...in 遍历。

var object = new Object();
// 测试 Object 原生属性是否可枚举
alert(object.propertyIsEnumerable("prototype")); // false

// 测试 window 属性
for (var v in window) {
  console.log(v);
}

第2步：动态添加或删除对象属性

JS 对象是动态的，可以在运行时添加或移除属性。使用 delete 关键字可以删除对象属性。

var obj = {};
obj.username = "zhangsan";
delete obj.username;
alert(obj.username); // undefined

第3步：对象定义的常见模式

除了字面量定义（推荐），还有以下经典模式：

1. 基于已有对象扩充

适合临时场景，直接给对象添加属性和方法，但复用性差。

2. 工厂方式

通过函数创建并返回对象。缺点是每次创建都会重新生成方法，浪费内存。改进版是将方法提取到函数外部，实现共享。

3. 构造函数方式

使用 new 关键字调用构造函数。this 指向新创建的对象。同样存在方法重复创建的问题。

4. 原型（Prototype）方式

将所有属性和方法定义在 prototype 上，实现内存共享。但若原型属性是引用类型（如数组），多个实例会共享同一引用，导致相互影响。

5. 混合模式（推荐：原型+构造函数）

原理：使用构造函数定义实例属性（每个实例独立），使用原型定义方法和静态属性（所有实例共享）。这是最常用且高效的模式。

function Person(name) {
  this.name = name; // 实例属性，互不干扰
}
Person.prototype.sayHello = function() { // 原型方法，共享
  alert(this.name);
};

var p1 = new Person("Alice");
var p2 = new Person("Bob");
p1.sayHello(); // Alice
p2.sayHello(); // Bob

6. 动态原型方式

在构造函数内部通过标志位判断，首次实例化时初始化原型方法。结合了构造函数和原型的优点，保持封装性。

数组操作注意事项

第1步：避免默认排序陷阱

Array.sort() 默认将元素转换为字符串后按 Unicode 编码排序，导致数字 [1, 25, 3] 排序结果为 [1, 25, 3]。需传入比较函数进行数值排序。

第2步：实现数值排序

传入一个比较函数，若 a < b 返回 -1，a > b 返回 1，否则返回 0。

var arr = [1, 25, 3];
arr.sort(function(num1, num2) {
  return num1 - num2; // 简写形式，适用于数值
});
// 结果: [1, 3, 25]

对象继承的五种方式

第1步：对象冒充

子类构造函数中调用父类构造函数，通过 this.method = Parent; this.method(...); delete this.method; 借用父类属性和方法。

第2步：Call 方式

利用 Function.call() 改变函数执行上下文。Parent.call(this, username) 让父类构造函数在子类的 this 环境下执行，继承实例属性。

第3步：Apply 方式

与 call 类似，区别在于第二个参数必须是数组。Parent.apply(this, [username])。适用于参数数量不确定或需批量传递的场景。

第4步：原型链方式

Child.prototype = new Parent();。优点是实现原型继承，缺点是难以传递参数，且所有子实例共享父类原型上的引用类型属性。

第5步：混合模式继承（推荐）

结合构造函数继承（继承实例属性）和原型链继承（共享方法）：Parent.call(this, ...) + Child.prototype = new Parent();。既能传参，又能保证方法共享，是最标准的继承模式。

function Parent(hello) {
  this.hello = hello;
}
Parent.prototype.sayHello = function() {
  alert(this.hello);
}

function Child(hello, world) {
  Parent.call(this, hello); // 继承属性
  this.world = world;
}
Child.prototype = new Parent(); // 继承方法
Child.prototype.sayWorld = function() {
  alert(this.world);
}

var c = new Child("hello", "world");
c.sayHello();
c.sayWorld();

其他重要特性

函数即对象：在 JS 中，函数是 Function 对象的一种。可以使用 new Function(arg1, arg2, ..., body) 动态创建函数，其中最后一个参数是函数体字符串。

无重载：JavaScript 不支持方法重载。如果定义了同名函数，后者会覆盖前者。若需处理不同参数，应依赖 arguments 对象自行判断。

返回值默认值：如果函数没有显式 return 语句，将返回 undefined。

总结

理解 JavaScript 的作用域、数据类型、对象创建模式及继承机制是编写健壮前端代码的基石。在实际开发中，推荐优先使用字面量定义对象、混合模式创建构造函数及实现继承，并注意数组排序时的类型转换陷阱。以上就是 JavaScript 基础知识点归纳的详细内容，更多关于 JavaScript 进阶技巧的资料请关注本站其它相关文章！