js基础之构造函数和类

JS的构造函数和ES6的类是JS中很重要的概念，也是面向对象编程的核心。在本文中，我们将探讨JS的构造函数和ES6的类的基础知识，包括它们的定义、使用方法以及它们之间的区别。

JS的构造函数

JS中的构造函数是一种特殊的函数，用于创建对象。它们是通过使用new关键字调用的函数，并且在函数内部使用this关键字来引用新创建的对象。构造函数可以包含属性和方法，这些属性和方法可以在创建对象时被调用。

以下是一个简单的JS构造函数的例子：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
  }
}

var person1 = new Person("John", 30);
person1.sayHello(); // 输出：Hello, my name is John and I am 30 years old.
// 原型上添加方法
Person.prototype.getName = function() {
   return this.name
}

在上面的例子中，我们定义了一个名为Person的构造函数，并将其用于创建一个名为person1的新对象。我们传递了两个参数，即name和age，这些参数用于设置person1对象的属性。此外，我们还定义了一个名为sayHello的方法，该方法将输出一个问候语，其中包括person1对象的名称和年龄。

ES6的类

ES6引入了类的概念，这是一种更简洁、更易于阅读和理解的面向对象编程方式。类是一种特殊的函数，用于创建对象。与构造函数不同，类的定义中包含了构造函数以及其他方法和属性的定义。

以下是一个简单的ES6类的例子：

class Person {
  // 使用constructor定义构造函数
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  // 实例原型上的方法
  sayHello() {
    console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
  }
}

var person1 = new Person("John", 30);
person1.sayHello(); // 输出：Hello, my name is John and I am 30 years old.

在上面的例子中，我们定义了一个名为Person的类，其中包含了一个构造函数和一个名为sayHello的方法。与构造函数不同，我们在类定义中使用constructor关键字来定义构造函数。我们还定义了一个名为sayHello的方法，该方法与构造函数中定义的方法相同。

类的私有属性

类的私有属性是指只能在类内部访问的属性，外部无法访问或修改。 在ES6之前，JS中没有原生支持类私有属性的概念，但是可以通过一些特定技巧方式来模拟实现私有属性。而在ES6中，我们可以使用类的#符号来定义私有属性，在类的内部访问私有属性时，需要在属性名前加上#符号。

class Person {
  #age;
  
  constructor(name, age) {
    this.name = name;
    this.#age = age;
  }
  
  getName() {
    return this.name;
  }
}

let person1 = new Person("John", 30);
console.log(person1.getName()); // 输出：John
console.log(person1.#age); // 抛出私有属性错误

类的静态属性

类自身的属性和方法（类本身相关的数据或常量信息），不会出现在实例上。在ES6中，我们可以使用static关键字来定义静态属性。

另外如果静态方法包含 this 关键字，这个 this 指的是类，而不是实例。static声明的静态属性和方法都不可以被子类继承。

class Person {
  static species = "human";
  
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
  
  static getSpecies() {
    return `The species of human is ${Person.species}.`;
  }
}

let person1 = new Person("John", 30);
person1.sayHello(); // 输出：Hello, my name is John and I am 30 years old.
console.log(Person.species); // 输出：human
console.log(Person.getSpecies()); // 输出：The species of human is human.
console.log(person1.getSpecies()) // Uncaught TypeError: person1.getSpecies is not a function

JS的构造函数和ES6的类之间的区别

JS的构造函数和ES6的类之间有几个重要的区别。以下是一些最重要的区别：

  1. 语法：构造函数使用函数声明的方式来定义，而类使用class关键字来定义。

  2. 继承：类支持更简单和更灵活的继承方式，同时也支持多重继承。构造函数也可以实现继承，但是需要使用原型链来实现。

  3. 可读性：类的语法更加易于阅读和理解，因为它使用了更加自然的面向对象编程方式。

  4. 实例化：构造函数需要使用new关键字来创建新的实例，而类可以直接调用构造函数来创建新的实例。

总结

JS的构造函数和ES6的类都是JS中非常重要的概念，它们都用于创建对象和实现面向对象的编程。构造函数和类之间有很多相似之处，但也有一些重要的区别。理解这些基础知识对于成为一名优秀的前端开发人员非常重要。