JavaScript 进阶：this 指向、构造函数和设计模式 04

2023-10-29 05:42:54

JavaScript 是一门灵活且强大的编程语言，它拥有丰富的特性和强大的功能。在 JavaScript 中，this 指向、构造函数和设计模式都是非常重要的概念，它们可以帮助我们构建出更加复杂和健壮的应用程序。

this 指向

this 指向是 JavaScript 中的一个特殊，它代表着当前正在执行代码的对象。this 指向可以在函数中、方法中和构造函数中使用，它可以帮助我们访问当前对象的属性和方法。

例如，以下代码中，this 指向的是 window 对象：

function sayHello() {
  console.log(this);
}

sayHello(); // 输出：Window {...}

在以下代码中，this 指向的是 document 对象：

document.addEventListener("click", function() {
  console.log(this);
});

document.dispatchEvent(new Event("click")); // 输出：HTMLDocument {...}

构造函数

构造函数是 JavaScript 中用于创建新对象的函数。构造函数的名称通常以大写字母开头，并且在函数名前面加上 new 关键字来调用。

例如，以下代码中的 Person 构造函数可以用来创建新的 Person 对象：

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

const person1 = new Person("John Doe", 30);
const person2 = new Person("Jane Doe", 25);

console.log(person1); // 输出：Person {name: "John Doe", age: 30}
console.log(person2); // 输出：Person {name: "Jane Doe", age: 25}

设计模式

设计模式是一种可重用的解决方案，它可以帮助我们解决常见的编程问题。设计模式可以分为三大类：创建型模式、结构型模式和行为型模式。

在 JavaScript 中，常见的创建型模式包括工厂模式、抽象工厂模式和单例模式。结构型模式包括组合模式、代理模式和装饰器模式。行为型模式包括策略模式、模板方法模式和观察者模式。

例如，以下代码中的工厂模式可以用来创建一个新的 Person 对象：

class PersonFactory {
  createPerson(name, age) {
    return new Person(name, age);
  }
}

const personFactory = new PersonFactory();
const person1 = personFactory.createPerson("John Doe", 30);
const person2 = personFactory.createPerson("Jane Doe", 25);

console.log(person1); // 输出：Person {name: "John Doe", age: 30}
console.log(person2); // 输出：Person {name: "Jane Doe", age: 25}