JavaScript

1. 变量提升 (Hoisting)

问题：什么是变量提升？在 JavaScript 中是如何工作的？

示例：

console.log(x); // 输出: undefined
var x = 5;
console.log(x); // 输出: 5

解释：在执行时，JavaScript 引擎会把变量声明提升到作用域的顶部，因此第一行的 x 输出为 undefined，而不是报错。

相当于：

var x;
console.log(x); // 输出: undefined
x = 5;
console.log(x); // 输出: 5

2. 闭包 (Closure)

问题：什么是闭包？它的用途是什么？

示例：

function outerFunction() {
    let outerVariable = 'I am outside!';
    return function innerFunction() {
        console.log(outerVariable);
    };
}

const closureFunc = outerFunction();
closureFunc(); // 输出: I am outside!

解释：innerFunction 可以访问 outerFunction 的变量 outerVariable，即使 outerFunction 已经执行完。这种特性使得闭包可以用来创建私有变量。

在JavaScript中，闭包是指有权访问另一个函数作用域中变量的函数。

简单地说，当一个函数内部嵌套另一个函数，并且内部函数引用了外部函数的变量，外部函数执行完毕后，其变量对象本应该被销毁，但由于内部函数仍在引用这些变量，这些变量就不会被销毁，这就形成了闭包。

例如：

function outer() {
    let count = 0;
    return function inner() {
        count++;
        return count;
    };
}
let counter = outer();
console.log(counter()); 
console.log(counter()); 

在这个例子中，inner函数就是一个闭包，它可以访问outer函数内部的count变量。每次调用counter（实际上是inner函数），count变量的值都会增加。

3. 原型 (Prototype)

问题：JavaScript 中的原型是什么？如何使用原型？

示例：

function Person(name) {
    this.name = name;
}

Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}.`);
};

const alice = new Person('Alice');
alice.greet(); // 输出: Hello, my name is Alice.

解释：greet 方法并不是在每个实例中定义的，而是共享的。这样可以节省内存。

4. 异步编程 (Asynchronous Programming)

问题：JavaScript 是如何处理异步操作的？

示例：

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched!");
        }, 1000);
    });
}

fetchData().then(data => {
    console.log(data); // 输出: Data fetched!
});

解释：通过使用 Promises，我们可以处理异步操作，并在完成时执行 .then 的回调。

5. 数组去重

问题：如何去除数组中的重复元素？

示例：

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]

解释：Set 是一种集合，它只允许唯一的值，通过将数组放入 Set 中实现去重。

6. 深拷贝 vs 浅拷贝

问题：什么是深拷贝和浅拷贝？

示例：

// 浅拷贝示例
const obj = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, obj);
shallowCopy.b.c = 3;
console.log(obj.b.c); // 输出: 3

// 深拷贝示例
const deepCopy = JSON.parse(JSON.stringify(obj));
deepCopy.b.c = 4;
console.log(obj.b.c); // 输出: 3

解释：浅拷贝只复制对象的第一层属性；结构较复杂时，嵌套对象共享同一引用。而深拷贝通过序列化和反序列化实现完全的独立。

7. 作用域 (Scope)

问题：解释 JavaScript 中的作用域和作用域链。

示例：

let globalVar = 'I am global';

function outerFunc() {
    let outerVar = 'I am outer';
    
    function innerFunc() {
        let innerVar = 'I am inner';
        console.log(outerVar); // 访问外部作用域
    }
    
    innerFunc();
}

outerFunc(); // 输出: I am outer

解释：innerFunc 可以访问其外部函数的变量 outerVar，这体现了作用域链。

8. 事件冒泡和捕获

问题：JavaScript 中事件是如何工作的？什么是事件冒泡和捕获？

示例：

<div id="outer" style="padding: 50px; background: lightcoral;">
    Outer Div
    <div id="inner" style="padding: 20px; background: lightblue;">Inner Div</div>
</div>

<script>
document.getElementById('outer').addEventListener('click', () => {
    console.log('Outer div clicked!');
});

document.getElementById('inner').addEventListener('click', (event) => {
    console.log('Inner div clicked!');
    event.stopPropagation(); // 阻止事件冒泡
});
</script>

解释：在这个示例中，点击内部的 div （inner div）时，只会输出它自己的消息，因为使用 event.stopPropagation() 阻止了事件冒泡。

原文地址：https://blog.csdn.net/Jsjendndn/article/details/144300032

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！