JavaScript 核心概念精解：从数据类型到闭包与作用域

JavaScript 语言特性与组成

JavaScript 是一种直译式脚本语言，采用动态类型和弱类型设计，基于原型进行对象扩展。其解释器被称为 JavaScript 引擎，作为浏览器的一部分，主要用于在客户端为 HTML 网页增加动态交互功能。相较于 C/C++ 等编译型语言，JavaScript 在运行过程中逐行解释执行。

主要特点包括：

• 脚本语言：解释执行，无需预编译。
• 基于对象：既可使用现有对象，也能创建新对象。
• 简单紧凑：弱类型变量，设计简洁。
• 事件驱动：直接响应用户操作（如点击、滚动），无需服务器交互。
• 跨平台性：依赖浏览器支持，与操作系统无关。

JavaScript 体系主要由三部分构成：

• ECMAScript：定义语法和基本对象。
• DOM（文档对象模型）：处理网页内容的方法与接口。
• BOM（浏览器对象模型）：与浏览器窗口交互的方法与接口。

数据类型：原始值与包装对象

JavaScript 的数据类型主要分为原始类型和引用类型。常见的原始类型包括 string、number、boolean、null 和 undefined；引用类型主要为 object（其中包含函数 Function、数组 Array 等）。

需要注意的是，使用字面量创建的字符串和数字是原始类型，而使用构造函数 new String() 或 new Number() 创建的是对象类型。这导致它们的 typeof 检测结果不同：

var str = "abc";
var Str = new String("abc");
var num = 100;
var Num = new Number(100);

console.log(typeof str, typeof Str, typeof num, typeof Num); 
// 输出: string object number object

在实际开发中，建议优先使用字面量方式定义基础数据，以获得更好的性能表现。

原型链：对象继承的基石

JavaScript 没有传统的类继承，而是基于原型（Prototype）链。当使用 new 调用构造函数或使用 Object.create 创建对象时，该对象会拥有一个内部属性（通常通过 __proto__ 访问，尽管现代标准推荐使用 Object.getPrototypeOf），指向构造函数的 prototype 对象。

例如，创建一个自定义构造函数：

function _obj() {}
_obj.prototype.name = "野兽";
_obj.prototype.age = 21;
_obj.prototype.sayHello = function() {
    console.log("Hello " + this.name);
};

var obj = new _obj();
console.log(obj.__proto__ == _obj.prototype); // true
obj.sayHello(); // Hello 野兽

// 原型链终点
console.log(Object.prototype.__proto__); // null

属性查找遵循原型链规则：首先在对象自身属性查找，若未找到则沿着 __proto__ 向上查找，直至 Object.prototype。特别地，Object.create(null) 创建的对象没有原型链，其 __proto__ 直接为 null，常用于构建类似 Map 的哈希结构以避免键名冲突。

作用域与作用域链

JavaScript 的传统作用域（ES5 之前）仅有全局作用域和函数作用域，不存在块级作用域。使用 var 声明的变量会被挂载到所在作用域的上下文中。

作用域规则：

• 函数内部可以访问外部变量的值。
• 函数外无法访问函数内部的局部变量，否则抛出 ReferenceError。

var firstNum = 1;
~function () {
    var secondNum = 2;
    console.log("Inside: " + firstNum + ", " + secondNum); // Inside: 1, 2
}();
// console.log(secondNum); // Uncaught ReferenceError: secondNum is not defined

作用域链： 嵌套函数会形成作用域链。内层函数可以访问外层函数的变量，但外层函数不能访问内层函数定义的变量。由于 JavaScript 是单线程执行，若中间步骤报错（如访问未定义的变量），后续代码将停止执行。

var firstNum = 1;
~function () {
    var secondNum = 2;
    ~function () {
        var thirdNum = 3;
        console.log(firstNum, secondNum, thirdNum); // 1, 2, 3
    }();
    // console.log(thirdNum); // Error: thirdNum is not defined
}();

闭包：保留状态的强大工具

闭包是指有权访问另一个函数作用域中变量的函数。其核心在于函数对象不仅包含代码逻辑，还引用了定义时的作用域链。这使得函数内部的局部变量在函数执行完毕后仍能保存在内存中。

function counter() {
    var num = 0; // 私有变量
    return {
        count: function () { return num++; },
        reset: function () { return num = 0; }
    };
}

var c1 = counter();
var c2 = counter();

console.log(c1.count()); // 0
console.log(c2.count()); // 0 (各自独立的状态)
c1.reset();
console.log(c1.count()); // 0
console.log(c2.count()); // 1 (c2 的 num 未被重置)

应用场景： 读取/修改函数内部变量，实现私有变量封装。

风险提示： 闭包会导致变量常驻内存，滥用可能引发内存泄漏。在不必要时应及时解除引用。

this 关键字的指向规则

this 的值取决于函数调用的方式，而非定义位置：

• 全局环境：this 指向全局对象（浏览器中为 window）。
• 普通函数调用：this 指向全局对象（严格模式下为 undefined）。
• 对象方法调用：this 指向调用该方法的对象本身。

// 全局或普通函数
console.log(this); // Window {...}

// 对象方法
var obj = {
    name: "野兽",
    showThis: function () {
        console.log(this.name); // "野兽"
    }
};
obj.showThis();

// 注意：如果将方法赋值给变量，this 指向会丢失
var fn = obj.showThis;
fn(); // undefined (this 指向 window/global)

arguments 对象

在函数内部，arguments 是一个类数组对象，包含传入的所有实际参数。它拥有 length 属性，但不具备数组的标准方法（如 push、pop）。

function argTest(val1, val2) {
    var v1 = arguments[0] ? arguments[0] : "Hello World";
    var v2 = arguments[1] ? arguments[1] : "你好 世界";
    console.log(v1, v2);
}

argTest();           // Hello World 你好 世界
argTest("A", "B");   // A B

在现代 ES6+ 开发中，建议使用剩余参数 ...args 替代 arguments，以便直接使用数组方法并提高可读性。

以上就是 JavaScript 常用基础知识强化学习的详细内容，更多关于 JavaScript 核心原理的资料请关注本站其它相关文章！