JavaScript 的基础知识

person 有无相生    watch_later 2024-08-10 10:04:19
visibility 182    class JavaScript    bookmark 专栏

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

1. 变量

  • varletconst
    • 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 声明的变量具有函数作用域,意味着它只能在声明它的函数内部访问。
  • 块级作用域letconst 声明的变量具有块级作用域,只能在声明的块内访问。

示例

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."

总结

深入理解这些 JavaScript 基础概念对于构建复杂的应用程序至关重要,特别是在 Node.js 环境下开发时。随着对这些概念的掌握,你将能够更轻松地应对异步编程、模块化设计和面向对象编程等挑战。

评论区
评论列表
menu