JavaScript核心概念梳理和理解

90 阅读2分钟

1. 闭包(Closures)

闭包允许内部函数访问其外部函数的变量,即使外部函数已经执行完毕。

示例代码:

javascript
function outerFunction() {
    let outerVariable = 'I am outside!';
    function innerFunction() {
        console.log(outerVariable);
    }
    return innerFunction;
}
const inner = outerFunction();
inner(); // 输出:I am outside!

详细解释:

  • innerFunction 能够访问 outerFunction 的变量 outerVariable

2. 原型(Prototype)和原型链(Prototype Chain)

JavaScript 使用基于原型的继承机制。对象通过其原型链继承属性和方法。

示例代码:

javascript
function Person(name) {
    this.name = name;
}
Person.prototype.sayHello = function() {
    console.log('Hello, my name is ' + this.name);
};
const alice = new Person('Alice');
alice.sayHello(); // 输出:Hello, my name is Alice

详细解释:

  • Person.prototype 上定义的方法可以被所有 Person 实例继承。
  • 现代JavaScript推荐使用 Object.getPrototypeOf() 或 Object.setPrototypeOf() 来操作原型。

3. 上下文(Context)和 this 关键字

this 的值取决于函数的调用方式,而不是是否处于严格模式。

示例代码:

javascript
const obj = {
    name: 'Alice',
    greet: function() {
        console.log('Hello, ' + this.name);
    }
};
obj.greet(); // 输出:Hello, Alice
const greet = obj.greet;
greet(); // 在严格模式下输出:Hello, undefined,在非严格模式下输出:Hello, [全局对象属性]

详细解释:

  • 在 obj.greet() 中,this 指向 obj
  • 在 greet() 中,this 的值取决于函数的调用上下文。

4. 异步编程(Async Programming)

异步编程允许JavaScript处理不需要立即执行的任务。

示例代码:

javascript
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data received');
        }, 1000);
    });
}
async function fetchDataAsync() {
    const data = await fetchData();
    console.log(data);
}
fetchDataAsync(); // 输出:Data received

详细解释:

  • fetchData 返回一个Promise对象,该对象在1秒后通过 setTimeout 的回调函数被resolve。

5. 事件循环(Event Loop)

事件循环是JavaScript的运行机制,负责处理任务队列和执行异步回调。

示例代码:

javascript
console.log('Start');
setTimeout(() => {
    console.log('Timeout');
}, 0);
console.log('End');
// 输出顺序:Start, End, Timeout

详细解释:

  • 事件循环确保即使在执行异步操作时,代码也能按预期顺序执行。

6. 作用域(Scope)和作用域链(Scope Chain)

作用域定义了变量和函数的可访问性,作用域链是查找变量的过程。

示例代码:

javascript
let globalVar = 'Global';
function outerFunc() {
    let outerVar = 'Outer';
    function innerFunc() {
        let innerVar = 'Inner';
        console.log(globalVar); // 输出:Global
        console.log(outerVar);  // 输出:Outer
        console.log(innerVar);  // 输出:Inner
    }
    innerFunc();
}
outerFunc();

详细解释:

  • innerFunc 可以访问所有在其作用域链上的变量。