JavaScript 面向对象浅析 - HelloWorld开发者社区

什么事类

类（class）：类是对拥有同样属性（property）和行为的一系列对象（object）的抽象。 这里说的“行为”，在基于类的面向对象的语言中通常叫做类的方法（method）。而在 JavaScript 里，函数也是“一等公民”，可以被直接赋值给一个变量或一个对象的属性，因此在本文后续的讨论中，把“行为”也归入“属性”的范畴。

JavaScript 对类的实现

JavaScript 规定每一个对象都可以有一个原型（[[prototype]] 内部属性）。（在实现 ECMAScript 5.1 规范以前，除了 Object.prototype 以外的对象都必须有一个原型。）每个对象都“共享”其原型的属性：在访问一个对象的属性时，如果该对象本身没有这个属性，则 JavaScript 会继续试图访问其原型的属性。这样，就可以通过指定一些对象的原型来使这些对象都拥有同样的属性。从而我们可以这样认为，在 JavaScript 中，以同一个对象为原型的对象就是属于同一个类的对象。

1. JavaScript 中对象的原型的指定方式

那么 JavaScript 中的对象与其原型是怎样被关联起来的呢？或者说，JavaScript 中的对象的原型是怎样被指定的呢？

1.1 new 操作符

JavaScript 有一个 new 操作符（operator），它基于一个函数来创建对象。这个用 new 操作符创建出来的对象的原型就是 new 操作符后面的函数（称为“构造函数”）的 prototype 属性。例如：

var obj = {"key": 1};
function fun() {}
fun.prototype = obj;
var a = new fun();

此时 fun 对象的原型就是 obj 对象。

1.2 Object.create 方法

Object.create 方法直接以给定的对象作为原型创建对象。一个代码例子：

var a = {"aa": 1};
var b = Object.create(a);

此时 b 对象的原型就是 a 对象。

1.3 Object.setPrototypeOf 方法

new 操作符和 Object.create 方法都是在创建一个对象的同时就指定其原型。而 Object.setPrototypeOf 方法则是指定一个已被创建的对象的原型。代码例子：

var a = {"aa": 1};
var b = Object.create(a);
// 此时 b 的原型是 a
var c = {"cc": 2};
Object.setPrototypeOf(b, c);
// 此时 b 的原型变为 c 了

1.4 隐式指定

数字、布尔值、字符串、数组和函数在 JavaScript 中也是对象，而它们的原型是被 JavaScript 隐式指定的：

数字（例如 1、1.1、NaN、Infinity）的原型是 Number.prototype；
布尔值（true 和 false）的原型为 Boolean.prototype；
字符串（例如 ""、"abc"）的原型为 String.prototype；
函数（例如 function () {}、function (a) { return a + '1'; }）的原型为 Function.prototype；
数组（如 []、[1, '2']）的原型是 Array.prototype；
用花括号直接定义的对象（如 {}, {"a": 1}）的原型是 Object.prototype。

2 JavaScript 中定义类的代码示例

下面给出定义一个类的一段 JavaScript 代码的示例。它定义一个名为 Person 的类，它的构造函数接受一个字符串的名称，还一个方法 introduceSelf 会输出自己的名字。

// ----==== 类定义开始 ====----
function Person(name) {
    this.name = name;
}
Person.prototype.introduceSelf = function () {
    console.log("My name is " + this.name);
};
// ----==== 类定义结束 ====----
// 下面实例化一个 Person 类的对象
var someone = new Person("Tom");
// 此时 someone 的原型为 Person.prototype
someone.introduceSelf(); // 输出 My name is Tom

如果转换为 ECMAScript 6 引入的类声明（class declaration）语法，则上述 Person 类的定义等同于：

class Person {
    constructor(name) {
        this.name = name;
    }
    introduceSelf() {
        console.log("My name is " + this.name);
    }
}

3 对“构造函数”的再思考

在上面的例子中，假如我们不通过 Person.prototype 来定义 introduceSelf 方法，而是在构造函数中给对象指定一个 introduceSelf 属性：

function Person(name) {
    this.name = name;
    this.introduceSelf = function () {
        console.log("My name is " + this.name);
    };
}
var someone = new Person("Tom");
someone.introduceSelf(); // 也会输出 My name is Tom

虽然这种方法中，通过 Person 构造函数 new 出来的对象也都有 introduceSelf 属性，但这里 introduceSelf 变成了 someone 自身的一个属性而不是 Person 类的共有的属性：

function Person1(name) {
    this.name = name;
}
Person1.prototype.introduceSelf = function () {
    console.log("My name is " + this.name);
};
var a = new Person1("Tom");
var b = new Person1("Jerry");
console.log(a.introduceSelf === b.introduceSelf); // 输出 true
delete a.introduceSelf;
a.introduceSelf(); // 仍然会输出 My name is Tom，因为 introduceSelf 不是 a 自身的属性，不会被 delete 删除
b.introduceSelf = function () {
    console.log("I am a pig");
};
Person1.prototype.introduceSelf.call(b); // 输出 My name is Jerry
// 即使 b 的 introduceSelf 属性被覆盖，我们仍然可以通过 `Person1.prototype` 来让 b 执行 Person1 类规定的行为。

function Person2(name) {
    this.name = name;
    this.introduceSelf = function () {
        console.log("My name is " + this.name);
    };
}
a = new Person2("Tom");
b = new Person2("Jerry");
console.log(a.introduceSelf === b.introduceSelf); // 输出 false
// a 的 introduceSelf 属性与 b 的 introduceSelf 属性是不同的对象，分别占用不同的内存空间。
// 因此这种方法会造成内存空间的浪费。
delete a.introduceSelf;
a.introduceSelf(); // 会抛 TypeError
b.introduceSelf = function () {
    console.log("I am a pig");
};
// 此时 b 的行为已经与 Person2 类规定的脱节，对象 a 和对象 b 看起来已经不像是同一个类的对象了

但是这种方法也不是一无是处。例如我们需要利用闭包来实现对 name 属性的封装时：

function Person(name) {
    this.introduceSelf = function () {
        console.log("My name is " + name);
    };
}
var someone = new Person("Tom");
someone.name = "Jerry";
someone.introduceSelf(); // 输出 My name is Tom
// introduceSelf 实际用到的 name 属性已经被封装起来，在 Person 构造函数以外的地方无法访问
// name 相当于 Person 类的一个私有（private）成员属性

JavaScript 的类继承

类的继承实际上只需要实现：

子类的对象拥有父类定义的所有成员属性；
子类的任何一个构造函数都必须在开头调用父类的构造函数。

实现第 2 点的方式比较直观。而怎样实现第 1 点呢？其实我们只需要让子类的构造函数的 prototype 属性（子类的实例对象的原型）的原型是父类的构造函数的 prototype 属性（父类的实例对象的原型），简而言之就是：把父类实例的原型作为子类实例的原型的原型。这样在访问子类的实例对象的属性时，JavaScript 会沿着原型链找到子类规定的成员属性，再找到父类规定的成员属性。而且子类可在子类构造函数的 prototype 属性中重载（override）父类的成员属性。

1 代码示例

下面给出一个代码示例，定义一个 ChinesePerson 类继承上文中定义的 Person 类：

function ChinesePerson(name) {
    Person.apply(this, name); // 调用父类的构造函数
}
ChinesePerson.prototype.greet = function (other) {
    console.log(other + "你好");
};
Object.setPrototypeOf(ChinesePerson.prototype, Person.prototype); // 将 Person.prototype 设为 ChinesePerson.prototype 的原型

var someone = new ChinesePerson("张三");
someone.introduceSelf(); // 输出“My name is 张三”
someone.greet("李四"); // 输出“李四你好”

上述定义 ChinesePerson 类的代码改用 ECMAScript 6 的类声明语法的话，就变成：

class ChinesePerson extends Person {
    constructor(name) {
        super(name);
    }

    greet(other) {
        console.log(other + "你好");
    }
}

2 重载父类成员属性的代码示例

你会不会觉得上面代码示例中，introduceSelf 输出半英文半中文挺别扭的？那我们让 ChinesePerson 类重载 introduceSelf 方法就好了：

ChinesePerson.prototype.introduceSelf = function () {
    console.log("我叫" + this.name);
};
var someone = new ChinesePerson("张三");
someone.introduceSelf(); // 输出“我叫张三”

var other = new Person("Ba Wang");
other.introduceSelf(); // 输出 My name is Ba Wang
// ChinesePerson 的重载并不会影响父类的实例对象