下面是“JavaScript中类的定义方式详解(四种方式)”的完整攻略。

1. ES6中的class关键字

在ES6中添加了class关键字，使得JavaScript也具有了面向对象编程的能力。 使用class定义一个类，实例化一个类用关键字new来实现。

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

  sayHi() {
    console.log(`Hello, my name is ${this.name}, and I'm ${this.age} years old.`);
  }
}
const person = new Person("Jack", 20);

console.log(person.name); // Jack
console.log(person.age); // 20
person.sayHi(); // Hello, my name is Jack, and I'm 20 years old.

在ES6中，class本质上还是JavaScript中的原型和构造函数的封装。

2. 工厂方式

在JavaScript中可以使用工厂方式来创建对象：工厂函数返回一个新的对象，该对象拥有自己的属性和方法。

function createPerson(name, age) {
  return {
    name: name,
    age: age,
    sayHi: function () {
      console.log(`Hello, my name is ${this.name}, and I'm ${this.age} years old.`);
    }
  };
}

const person = createPerson("Jack", 20);

console.log(person.name); // Jack
console.log(person.age); // 20
person.sayHi(); // Hello, my name is Jack, and I'm 20 years old.

3. 原型方式

在JavaScript中，每个对象都有一个原型对象，原型对象可以拥有方法和属性，创建对象时如果没有该属性，则会在它的原型对象中查找该属性。

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

Person.prototype.sayHi = function () {
  console.log(`Hello, my name is ${this.name}, and I'm ${this.age} years old.`);
};

const person = new Person("Jack", 20);

console.log(person.name); // Jack
console.log(person.age); // 20
person.sayHi(); // Hello, my name is Jack, and I'm 20 years old.

4. Object.create()方式

Object.create()方法可以实现继承，可以用一个对象来创建另一个对象。使用Object.create()方法创建的对象会继承所传对象的原型。

const person = {
  name: "Jack",
  age: 20,
  sayHi: function () {
    console.log(`Hello, my name is ${this.name}, and I'm ${this.age} years old.`);
  }
};

const newPerson = Object.create(person);
newPerson.name = "Tom";
newPerson.age = 30;

console.log(newPerson.name); // Tom
console.log(newPerson.age); // 30
newPerson.sayHi(); // Hello, my name is Tom, and I'm 30 years old.

以上就是“JavaScript中类的定义方式详解(四种方式)”的完整攻略了。在最后一个示例中，我们创建了一个对象 person，然后使用 Object.create() 方法创建了另一个对象 newPerson，并将 person 对象作为 newPerson 对象的原型，这就实现了继承。

本文链接：http://task.lmcjl.com/news/8677.html