JS 面向对象编程

来关注用 JS 做面向对象编程。了解一下面向对象的理论,探索如何用 JS 创建构造函数( constructor )来模拟类,也就是 class ,然后如何创建对象实例。

面向对象的基础理论

先来宏观看一下到底什么是面向对象编程。面向对象编程,就是把现实世界的一个东西抽象成我们程序中的一个对象。

对象中会包含相关的数据和代码,这些都是这个现实的东西的一些信息构成的。数据和代码都被包裹在一个对象中,这个用面向对象的术语来讲,就叫做封装 ( encapsulation )。

定义一个对象模板

现在来写一个展示学生和老师信息的程序。先不考虑语言层面的东西,就看看用面向对象的思维方式如何来抽象这个问题。

首先,把一个人的信息抽象成下面的这些属性和方法。

在很多其他编程语言中,这样一个通用的对象类型定义被叫做类,也就是 class 。类不是一个对象,而是一个模板,里面描述了一个对象都有哪些特质。

创建一个实际对象

根据类,可以来创建对象实例 ,也就是一个包含类中的那些数据和功能的一个对象。从 Person 这个 class 就可以创建几个具体的真人了。

创建对象的时候,类的构造函数( constructor )会被执行以创建对象。这个过程就叫做实例化 ( instantiation ) 。

更专用的类

现在其实我们想要的不是任意的人,而是老师和学生,人的两个特定类型。在面向对象编程领域,我们可以基于已有类来创建新类,这些子类继承( inherit )父类的属性和方法而来,这样就可以复用部分逻辑了。

老师和学生这两个类有继承了人这个类的成员。

有了子类,就可以根据它来创建对象了。

好,理论介绍就是这些,下面的内容来用 JS 实践这些理论。

构造函数和对象实例

有些人会说 JS 不是一个真正的面向对象语言,它的 class 语句只是 prototype 之上的一层语法糖,跟真正意义上的 class 不同。实际上,JS 使用一种特殊的函数叫做构造函数( constructor )来定义类和它的功能。

来看一个实例

function createNewPerson(name) {
  var obj = {}
  obj.name = name
  obj.greeting = function() {
    alert("Hi! I'm " + this.name + '.')
  }
  return obj
}

下面就可以调用这个函数来创建一个新的人的对象了。

var salva = createNewPerson('Salva')
salva.name
salva.greeting()

但是上面的这个函数还是有点啰嗦,里面先创建一个空对象。所以可以用一个构造函数来替代

function Person(name) {
  this.name = name
  this.greeting = function() {
    alert("Hi! I'm " + this.name + '.')
  }
}

构造函数就是 JS 版的 class 。

一般构造函数都是以大写字母打头,目的就是便于识别

那么如何用这个构造函数来创建对象呢?

var person1 = new Person('Bob')
var person2 = new Person('Sarah')

可以看到使用了 new 关键字。

其他的创建对象的方式

也可以用 Object() 这个构造函数。

var person1 = new Object()

然后再填充内容

person1.name = 'Chris'
person1['age'] = 38
person1.greeting = function() {
  alert("Hi! I'm " + this.name + '.')
}

当然也可以一次性的写成下面的形式

var person1 = new Object({
  name: 'Chris',
  age: 38,
  greeting: function() {
    alert("Hi! I'm " + this.name + '.')
  }
})

参考