Matarialize中文社区-JavaScript 的基础知识

JavaScript 的基础知识

有无相生 2024-08-10 10:04:19

276 JavaScript 专栏

深入理解 JavaScript 的基础知识对于掌握 Node.js 至关重要。以下是对 JavaScript 关键概念的详细解释：

1. 变量

var、let、const：
- var：在 ES6 之前，JavaScript 中只有 var 用于声明变量。var 有函数作用域，而不是块级作用域，这可能导致变量提升问题。
- let：在 ES6 引入，具有块级作用域，变量只能在声明的块内访问，避免了 var 的提升问题。
- const：同样具有块级作用域，但声明的变量是常量，不能重新赋值。

示例：

function example() {
    var x = 10;
    if (true) {
        var x = 20; // 重新声明，覆盖外部变量
        console.log(x); // 20
    }
    console.log(x); // 20
}

function example2() {
    let y = 10;
    if (true) {
        let y = 20; // 块级作用域，只在这个块内有效
        console.log(y); // 20
    }
    console.log(y); // 10
}

const z = 30;
z = 40; // TypeError: Assignment to constant variable.

2. 作用域

全局作用域：在代码的最外层声明的变量或函数具有全局作用域，在任何地方都可以访问。
函数作用域：var 声明的变量具有函数作用域，意味着它只能在声明它的函数内部访问。
块级作用域：let 和 const 声明的变量具有块级作用域，只能在声明的块内访问。

示例：

var globalVar = "I'm global";

function scopeExample() {
    var functionVar = "I'm inside a function";
    if (true) {
        let blockVar = "I'm inside a block";
        console.log(blockVar); // "I'm inside a block"
    }
    // console.log(blockVar); // ReferenceError: blockVar is not defined
}

console.log(globalVar); // "I'm global"
// console.log(functionVar); // ReferenceError: functionVar is not defined

3. 闭包（Closure）

闭包是指函数与其外部环境之间的结合。一个函数可以访问其词法作用域中的变量，即使该函数在词法作用域之外执行。
闭包常用于创建私有变量或函数、回调函数、工厂函数等。

示例：

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

const increment = outer();
increment(); // 1
increment(); // 2

4. 异步编程

回调函数：最基本的异步处理方式。一个函数作为参数传递给另一个函数，当操作完成时被调用。
Promise：ES6 引入的一种异步编程方式，表示一个未来可能完成的操作（resolved）或失败的操作（rejected）。
async/await：ES2017 引入，用于简化异步操作，使代码看起来像是同步执行的。async 声明一个函数为异步函数，await 用于等待 Promise 的结果。

示例：

// 回调
function fetchData(callback) {
    setTimeout(() => {
        callback("Data received");
    }, 1000);
}

fetchData((data) => {
    console.log(data);
});

// Promise
function fetchDataPromise() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data received");
        }, 1000);
    });
}

fetchDataPromise().then(data => {
    console.log(data);
});

// async/await
async function fetchDataAsync() {
    const data = await fetchDataPromise();
    console.log(data);
}

fetchDataAsync();

5. 面向对象编程

类（Class）：ES6 引入的语法糖，用于创建对象和继承的方式更直观。类是基于原型的继承。
构造函数：用 constructor 创建类的实例并初始化属性。
继承（Inheritance）：使用 extends 关键字实现类的继承，并可用 super 调用父类的方法。

示例：

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name); // 调用父类的构造函数
        this.breed = breed;
    }

    speak() {
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog("Rex", "Labrador");
dog.speak(); // "Rex barks."