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可以访问所有在其作用域链上的变量。