阿里巴巴经典面向对象面试题升级版（推荐阅读）

2023-12-19 00:52:12

探索 JavaScript 的基本概念：作用域、预编译、原型和事件循环

引言

作为一名 JavaScript 初学者，打好基础至关重要。本文将深入探讨 JavaScript 的核心概念，例如作用域、预编译、原型和事件循环。通过理解这些基础知识，你可以提升你的编码能力，编写更清晰、更高效的 JavaScript 代码。

作用域

在 JavaScript 中，作用域定义了变量和函数的可见性范围。当我们谈论作用域时，我们指的是函数或块（如 if 语句或循环）中的变量或函数。

作用域在 JavaScript 中遵循词法规则。这意味着内层函数可以访问外层函数的作用域，但外层函数不能访问内层函数的作用域。这使得控制变量的可见性变得非常容易，并允许模块化和代码重用。

例子：

function outer() {
  var a = 1;

  function inner() {
    console.log(a); // 1
  }

  inner();
}

outer();

预编译

JavaScript 在执行代码之前会进行预编译，这涉及提升变量和函数声明到代码块的顶部。这样做的目的是为了确保变量和函数在使用之前可以被访问到。

例如，考虑以下代码：

var a = 1;

function outer() {
  console.log(a); // 1

  if (a === 1) {
    var b = 2;

    function inner() {
      console.log(b); // 2
    }

    inner();
  }
}

outer();

在预编译后，代码将如下所示：

var a = 1;
var b;
function outer() {
  console.log(a); // 1

  if (a === 1) {
    b = 2;
    function inner() {
      console.log(b); // 2
    }

    inner();
  }
}

outer();

原型和原型链

在 JavaScript 中，每个对象都有一个原型，这是一个包含该对象所有属性和方法的对象。当一个对象访问一个不存在的属性或方法时，JavaScript 会自动在该对象的原型中查找该属性或方法。

如果在原型中找不到该属性或方法，JavaScript 会继续沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的末端。

例子：

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

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

var person = new Person("John");

person.sayHello(); // "Hello, my name is John"

new 运算符优先级

new 运算符的优先级高于函数调用运算符。这意味着当 new 运算符和函数调用运算符同时出现在表达式中时，new 运算符将优先执行。

例子：

var a = 1;

function outer() {
  var a = 2;

  function inner() {
    console.log(a); // 1
  }

  new inner();
}

outer();

事件循环

事件循环是一个负责协调异步任务执行的循环。它不断检查是否有待处理的任务，并将其添加到一个称为“任务队列”的队列中。任务队列中的任务按照先入先出的顺序执行。

JavaScript 代码分为同步任务（立即执行）和异步任务（稍后执行）。事件循环负责执行异步任务，确保它们不会阻塞主线程。

例子：

console.log("start");

setTimeout(function() {
  console.log("timeout");
}, 0);

Promise.resolve().then(function() {
  console.log("promise");
});

console.log("end");