JavaScript核心概念与基础语法解析

语言特性与组成结构

JavaScript是一种直译式、动态类型、弱类型的脚本语言，采用事件驱动模型。与C/C++等编译型语言不同，JS在运行过程中逐行解释执行。它由三部分组成：

• ECMAScript：定义语法、关键字、类型和运算符。
• DOM（文档对象模型）：提供操作网页内容和结构的接口。
• BOM（浏览器对象模型）：提供与浏览器窗口交互的接口。

数据类型与对象创建

JavaScript的数据类型分为基本类型和引用类型。基本类型包括 string, number, boolean, null, undefined；引用类型为 object（包含函数、数组、日期等）。

需注意的是，使用字面量创建的值与使用构造函数创建的对象在类型判定上存在差异。例如：

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

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

上述代码表明，str和是基本类型字符串/数字，而Str和Num是包装类对象。虽然JS会自动进行基本类型与对象类型的转换，但在内存存储和类型判断上它们截然不同。

原型链机制

JavaScript对象通过原型链实现继承。每个对象都有一个内部链接指向另一个对象，即原型（prototype）。当访问对象的属性时，若当前对象不存在该属性，引擎会沿着原型链向上查找，直到找到该属性或到达链尾（null）。

通过构造函数创建对象时，其原型链结构如下：

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

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

值得注意的是，Object.create(null)创建的对象没有任何原型，其原型直接指向null，因此不会受到Object.prototype上属性（如toString）的影响。

作用域与作用域链

传统JavaScript中，var声明的变量仅具有函数作用域或全局作用域，不存在块级作用域。变量在声明它的函数内部及嵌套函数中可用，外部无法访问内部声明的变量。

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

作用域链决定了变量的访问顺序。内部函数可以访问外部函数的变量，但反之不行。当执行环境进入某个函数时，会创建一个活动对象（AO），并将形参和内部变量加入其中。作用域链由局部变量对象向外层的变量对象依次连接，直至全局对象。

var firstNum = 1;
(function() {
    var secondNum = 2;
    (function() {
        var thirdNum = 3;
        console.log(firstNum, secondNum, thirdNum); // 1 2 3
    })();
    // console.log(thirdNum); // ReferenceError
})();

闭包的原理与应用

闭包是指有权访问另一个函数作用域中变量的函数。在JavaScript中，函数对象不仅包含代码逻辑，还引用了其定义时的词法作用域。这使得内部变量即使在外部函数执行完毕后，仍能通过闭包被保留和访问。

function counter() {
    var num = 0;
    return {
        increment: function() { return num++; },
        reset: function() { num = 0; }
    };
}

var c1 = counter();
var c2 = counter();
c1.increment(); // 0
c2.increment(); // 0
c1.reset();
c1.increment(); // 0
c2.increment(); // 1

上述示例展示了两个独立的计数器对象c1和c2，它们各自拥有独立的私有变量num。闭包常用于实现数据封装和状态保持，但由于闭包会使变量始终保存在内存中，滥用可能导致内存泄漏，需谨慎使用。

this指向与arguments对象

this指向：取决于函数的调用方式。 - 全局环境中：this指向全局对象（浏览器中为window）。 - 普通函数调用：this同样指向全局对象（非严格模式下）。 - 方法调用：this指向调用该方法的对象。

console.log(this === window); // true

var obj = {
    name: "Object",
    show: function() {
        console.log(this === obj); // true
    }
};
obj.show();

arguments对象：在函数体内，arguments是一个类数组对象，包含传递的参数。它具有length属性，但不具备数组的方法（如push、pop）。通过arguments[i]可以访问第i个参数。

function testArgs() {
    console.log(arguments.length); // 参数个数
    console.log(arguments[0]);     // 第一个参数
}
testArgs("a", "b", "c");

以上就是JavaScript核心概念的详细内容，更多关于前端基础优化的资料请关注本站其它相关文章！