JavaScript 手写代码实战指南

2023-11-18 15:46:10

前言

在日常工作中，我们经常会遇到需要手写 JavaScript 代码的情况，例如在面试中、在没有框架或库支持的环境中，或者为了更好地理解 JavaScript 的底层原理。手写代码可以帮助我们更深入地理解 JavaScript 的语法和运行机制，从而写出更高质量的代码。

构建函数与原型

构建函数是用于创建对象的一种特殊函数，它通过 new 操作符调用。构建函数中的代码将在每次创建新对象时执行。构建函数可以通过 prototype 属性访问其原型对象，原型对象是所有由该构建函数创建的对象的公共属性和方法的集合。

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

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

const person1 = new Person('John');
person1.greet(); // Hello, my name is John.

this

this 关键字指向当前正在执行的函数的作用域中的对象。在构建函数中，this 指向新创建的对象。在方法中，this 指向调用该方法的对象。在箭头函数中，this 指向最近的非箭头函数的作用域中的对象。

const person = {
  name: 'John',
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

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

const greet = person.greet;
greet(); // TypeError: Cannot read properties of undefined (reading 'name')

箭头函数

箭头函数是一种简写形式的函数表达式，它使用 => 运算符来定义。箭头函数没有自己的 this 关键字，它继承最近的非箭头函数的作用域中的 this。

const person = {
  name: 'John',
  greet: () => {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

person.greet(); // Hello, my name is undefined.

作用域与闭包

作用域是程序中变量和函数的可见范围。闭包是一个函数及其周围环境的组合，即使函数已经返回，闭包仍然可以访问该环境中的变量。

function outer() {
  let x = 10;

  function inner() {
    console.log(x);
  }

  return inner;
}

const innerFunction = outer();
innerFunction(); // 10

事件循环

事件循环是 JavaScript 的核心机制之一，它负责处理事件和执行任务。事件循环是一个不断运行的循环，它不断检查是否有事件发生，如果有事件发生，它就会执行该事件的处理程序。事件循环还负责执行异步任务，例如 setTimeout() 和 Promise。

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('End');