JS 面向对象的5钟写法

下面我来详细讲解一下“JS 面向对象的5种写法”的完整攻略。

前言

在JavaScript中，常用的面向对象的写法有5种，分别是原型链、Class、工厂模式、构造函数和混合模式。下面我们来分别介绍这五种写法。

1. 原型链

在JavaScript中，每个对象都有一个原型（也就是一个或者多个prototype）。使用原型链实现的继承是通过将一个类型的实例设置为另一个类型的原型来实现的。

示例代码如下：

function Person() {}
Person.prototype.sayName = function() {
  console.log(this.name);
};

function Student(name) {
  this.name = name;
}
Student.prototype = new Person();

var student1 = new Student('Tom');
student1.sayName(); // 输出 Tom

2. Class

Class是ES6语言提供的一种用于定义类的方法。体系结构上，它将类的属性和方法封装在一个蓝图中，从而更方便地实现对象的创建、维护和继承。

示例代码如下：

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

  sayName() {
    console.log(this.name);
  }
}

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }
}

3. 工厂模式

工厂模式是JavaScript中的经典模式之一，它旨在用一个函数来生成对象实例并返回创建好的对象。

示例代码如下：

function createPerson(name) {
  var obj = {};
  obj.name = name;
  obj.sayName = function() {
    console.log(this.name);
  };
  return obj;
}

var person1 = createPerson('Tom');
person1.sayName(); // 输出 Tom

4. 构造函数

构造函数创建一个实例，参数也通过this来进行传递。

示例代码如下：

function Person(name) {
  this.name = name;
  this.sayName = function() {
    console.log(this.name);
  };
}

var person1 = new Person('Tom');
person1.sayName(); // 输出 Tom

5. 混合模式

混合模式将构造函数与原型链结合起来使用，从而达到共享属性和方法的效果。

示例代码如下：

function Person(name) {
  this.name = name;
}
Person.prototype.sayName = function() {
  console.log(this.name);
};

function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

以上就是JavaScript中面向对象的5种写法的攻略。可以根据具体的业务需求和项目规模来选择不同的写法来实现。