本篇分别通过 ES5 和 ES6 讲述JS中的类、静态方法、继承和单例

一、ES5 类和静态方法

1、构造函数里面的方法和属性与原型链上的方法和属性都叫做：实例方法。要调用必须通过实例化构造函数（Person类），静态方法直接通过构造函数（类名）进行调用

2、原型链上的属性和方法可以被多个实例共享，而构造函数里面的方法和属性不会被多个实例共享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 通过构造函数来定义类
function Person(name, age) {
  // 构造函数里面的方法和属性
  this.name = name;
  this.age = age;
  this.run = function () {
    console.log(`${this.name} - ${this.age}`);
  };
}
// 构造函数原型链上的属性和方法
Person.prototype.sex = "男";
Person.prototype.work = function () {
  console.log(`${this.name} - ${this.age} - ${this.sex}`);
};
// 静态方法
Person.setName = function () {
  console.log("静态方法");
};

// 实例方法是通过实例化来调用的
var p = new Person("zhangsan", "20");
p.run();
p.work();
// 静态方法是通过类名直接调用
Person.setName();

二、ES5 继承

原型链继承和对象冒充继承：

  • 对象冒充继承：可以实现将参数传递到父类，但是没法继承原型链上的属性和方法
  • 原型链继承：可以继承构造函数里面以及原型链上面的属性和方法，但是实例化子类的时候没法给父类传参

所以平时都是两者结合起来实现继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.run = function () {
    console.log(this.name + "-" + this.age);
  };
}
Person.prototype.work = function () {
  console.log("work");
};

function Web(name, age) {
  // 通过 call()，能够使用属于另一个对象的方法。
  // 此处相当于 Web 函数去调用Person类，并传值name,age
  Person.call(this, name, age); // 对象冒充实现继承，可以实现将参数传递到父类
}
Web.prototype = new Person(); // 原型链继承，但是原型链继承在实例化时没法将参数传递到父类里面
var w = new Web("李四", 20);
w.run(); // 测试调用构造函数里面的方法
w.work(); // 测试调用原型链上的方法

三、ES6 类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class Person {
  constructor(name, age) {
    // 类的构造方法，实例化的时候执行，new的时候执行
    this._name = name;
    this._age = age;
  }
  // 定义方法，注意：es6里面方法之间没有逗号(,)
  getName() {
    console.log(this._name);
  }
  setName() {
    this._name = name;
  }
}

var p = new Person("张三", "20");
p.setName("李四");
p.getName();

四、ES6 继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  getInfo() {
    console.log(`姓名：${this.name} - 年龄：${this.age}`);
  }
  run() {
    console.log("run");
  }
}
class Web extends Person {
  constructor(name, age, sex) {
    super(name, age); // 实例化子类的时候把子类的数据传给父类
    this.sex = sex;
  }
  print() {
    console.log(this.sex);
  }
}

var w = new Web("张三", "30", "男");
w.print(); // 调用自己的方法
w.getInfo(); // 调用父类方法

五、ES6 静态方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class Person {
  constructor(name) {
    // 属性
    this._name = name;
  }
  run() {
    // 实例方法
    console.log(this._name);
  }
  static work() {
    // 静态方法
    console.log("这是es6中的静态方法");
  }
}
// 或者通过这种方式定义类的静态方法
Person.instance = "这是一个静态方法的属性";

var p = new Person("张三");
p.run();
Person.work(); // 通过类名来调用静态方法
console.log(Person.instance);

六、类的应用：单例

使用场景：nodejs连接mongodb数据库，只连接成功一次，然后之后每次操作数据库都使用本次连接后的实例，不用每次都重新连接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
class DB {
  static getInstance() {
    // 单例（单例是通过静态方法来实现的）
    if (!DB.instance) {
      DB.instance = new DB();
    }
    return DB.instance;
  }
  constructor() {
    console.log("实例化会触发构造函数");
    this.connect();
  }
  connect() {
    console.log("连接数据库");
  }
  find() {
    console.log("查询数据库");
  }
}

var myDb1 = new DB();
var myDb2 = new DB(); // 验证发现：每次实例化都会执行构造函数重新进行连接数据库。 所以对性能产生影响，采用单例模式进行处理
var myDb3 = DB.getInstance(); // 单例实例化：实例化多次但只会调用一次构造函数，然后各自调用实例方法互不影响
myDb3.find();
var myDb4 = DB.getInstance();
myDb4.find();

七、详解ES6中的类和继承的使用

1、ES6之前实现面向对象编程的方法

一直以来，JS都是使用function和prototype来模拟其他语言中类class实现面向对象的编程。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 构造函数模拟创建一个Dog类
function Dog(name) {
  this.name = name;
}
// 把一些属性和方法，定义在prototype对象上
Dog.prototype = {
  type: "动物",
  say: function () {
    alert("名字叫" + this.name);
  },
};

// 实例化
var dog = new Dog("旺财");
// 调用say方法
dog.say();
// 结果：名字叫旺财

2、ES6引入了class

ES6引入的class实际上也是通过函数function和原型prototype实现，只不过对实现方式做了进一步的封装。

3、基本用法

那么，我们就使用ES6封装后的类class来实现我们想要的效果，我们来学学它的基本用法。

声明一个类的写法：

1
2
3
4
5
6
7
8
// 定义一个叫Animal的类
class Animal {
  // 构造函数constructor
  constructor(color) {
    this.color = color;
  }
}

我们通过关键字class来声明一个名字叫Animal的类，可以看到类里面（花括号 {}里面）有一个叫constructor方法，它就是构造方法，构造方法里面的this，指向的是该类实例化后的对象，这就是实现了一个类的声明。

其中，构造方法constructor是一个类必须要有且只能存在一个的方法，默认返回实例对象；创建类的实例对象的时候，会调用此方法来初始化实例对象。如果你没有编写constructor方法，执行的时候也会被加上一个默认的空的constructor方法。

4、类的属性和方法

了解了类的声明和constructor构造函数的特点，我们下面来了解如何给类添加属性和方法。

1
2
3
4
5
6
7
8
9
10
11
12
class Animal {
  // 构造方法
  constructor(name) {
    // 属性name
    this.name = name;
  }

  // 实例方法getName
  getName() {
    return this.name;
  }
}

我们把类名后面的括号{ }里面的内容称之为类体，我们会在类体内来编写类的属性和方法。上面的案例中，类体内有2个方法：constructor( )、getName()。

我们可以在构造方法constructor里面自定义一些对象的属性，比如案例中的name属性。此外，我们还自定义了一个getName( )方法，它属于类的实例方法，实例化后对象可以调用此方法。

5、类的实例对象

掌握了类的属性和方法的写法，接下来，我们学习如何创建对象和使用对象的实例方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Animal {
  // 构造方法
  constructor(name) {
    // 属性name
    this.name = name;
  }

  // 实例方法getName
  getName() {
    return "This is a" + this.name;
  }
}

// 创建一个Animal实例对象dog
let dog = new Animal("dog");
dog.name; // 结果：dog
dog.getName(); // 结果：This is a dog

实例对象的创建有几个要注意的事项：

必须使用new创建字来创建类的实例对象；

先声明定义类，再创建实例，否则会报错

6、类的静态方法

上面讲到的自定义方法是实例方法，也就是实例化后的对象才可以调用的方法，比如上述案例的getName( )方法。除了实例方法以外，我们还可以定义一种直接使用类名即可访问的方法，我们称之为“静态方法”。

我们一起来看看如何实现静态方法的定义：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class Animal {
  // 构造方法
  constructor(name) {
    // 属性name
    this.name = name;
  }

  // 自定义一个静态方法
  static friends(a1, a2) {
    return `${a1.name} and ${a2.name} are friends`;
  }
}

// 创建2个实例
let dog = new Animal("dog");
let cat = new Animal("cat");

// 调用静态方法friends
Animal.friends(dog, cat);
// 结果：dog and cat are friends

静态方法和实例方法不同的是：静态方法的定义需要使用static关键字来标识，而实例方法不需要；此外，静态方法通过类名来的调用，而实例方法通过实例对象来调用。

7、类的继承

说到类class，就不得不说类的继承，ES6使用extends关键字来实现子类继承父类，我们来演示一下：

1
2
3
4
5
6
7
8
9
10
11
 // 父类Animal
class Animal {//...}

// 子类Dog
class Dog extends Animal {
  // 构造方法
  constructor(name,color){
    super(name);
    this.color = color;
  }
}

上面的案例中，我们定义两个类，Animal类作为父类，Dog类作为子类，然后通过关键字extends来实现继承，此外，我们还注意到一个关键字super，它相当于是父类中的this。

我们可以用super来引用父类，访问父类的方法，我们来演示一下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 父类Animal
class Animal {
  // 构造方法
  constructor(name) {
    // 属性name
    this.name = name;
  }

  // 父类的自定义方法
  say() {
    return `This is a animal`;
  }
}

// 子类Dog
class Dog extends Animal {
  // 构造方法
  constructor(name, color) {
    super(name);
    this.color = color;
  }

  // 子类的实例方法
  getAttritube() {
    return `${super.say()},
              name：${this.name},
              color:${this.color}`;
  }
}

// 创建Dog的实例对象
let d = new Dog("dog", "black");

// 调用子类的Dog的实例方法
d.getAttritube();
// 结果：This is a animal,
// name：dog,
// color:black

在父类中，我们定义了say方法，想要在子类中调用父类的say方法的话，我们使用super.say( )即可实现。

使用super有几个要注意的事项：

  • 子类必须在constructor方法中调用super方法
  • 必须先调用super( )，才可以使用this，否则报错

以上就是关于类继承的介绍，重点在于关键字extends和super，尤其是super的理解和使用，大家需要理解透彻。

如果是完全没有接触过类class和面向对象的初学者，看这一节也许不能完全理解透彻，你可以先翻看第九节的JavaScript面向对象的介绍。

八、总结

1、ES5中类和继承

  • 利用构造函数和原型链来实现类。
  • 原型链实现继承

2、ES6中类和继承

  • class：必须要有constructor
  • extends

3、静态方法和单例

  • es6通过static来定义静态方法
  • 通过静态方法来实现单例