JavaScript里的类和继承

JavaScript与大部分客户端语言有几点明显的不一样：

JS是 动态解释性语言，没有编译过程，它在程序运行过程当中被逐行解释执行
JS是 弱类型语言，它的变量没有严格类型限制
JS是面向对象语言，但 没有明确的类的概念（虽然有class关键字，然而目前并无什么卵用）
JS虽然没有类，但能够经过一些方法来模拟类以及实现类的继承。
一切皆对象，还先从对象提及。

 

一、对象（Object）

---

ECMA-262对对象的定义是：无序属性的集合，其属性能够包含基本值、对象或者函数。
直观点描述，就是由多个键值对组成的散列表。

JS建立对象的方法和其它语言大同小异：

// 经过构造函数建立
var zhangsan = new Object();
zhangsan.name = "张三";
zhangsan.age = 20;
zhangsan.sayHi = function() {
    alert("Hi, I'm " + this.name);
};

// 经过对象字面量建立
var lisi = {
    name: "李四",
    age: 21,
    sayHi: function() {
        alert("Hi, I'm " + this.name);
    }
};

当须要大量建立相同结构的对象时，可使用 对象工厂（Object Factory）：

// 对象工厂
function createPerson(name, age) {
    return {
        name: name,
        age: age,
        sayHi: function() {
            alert("Hi, I'm " + this.name);
        }
    };
}

var zhangsan = createPerson("张三", 20);
var lisi = createPerson("李四", 21);

但经过这种方式建立出来的实例，不能解决类型识别问题，只知道它是一个对象，但具体什么？没法判断：

zhangsan instanceof ?
lisi.constructor = ?

这时，“类”就登场了。

 

二、类（Class）

---

2.一、构造函数模式

事实上，JS中每一个函数（function）自己就是一个构造函数（constructor），就是一个类：

// 构造函数模式
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = function() {
        alert("Hi, I'm " + this.name);
    };
}

var zhangsan = new Person("张三", 20);
var lisi = new Person("李四", 21);
alert(zhangsan instanceof Person); // true
alert(lisi.constructor === Person); // true

这里面其实有个问题：

alert(zhangsan.sayHi === lisi.sayHi); // false

多个实例中的同名方法并不相等，也就是说存在多个副本。而这些行为是相同的，应该指向同一个引用才对。

为了解决这个问题，JS为每一个函数分配了一个 prototype（原型）属性，该属性是一个指针，指向一个对象，而这个对象的用途是包含能够由特定类型的全部实例共享的属性和方法。

2.二、原型模式

原型（Prototype）：指向一个对象，做为全部实例的基引用（base reference）。

// 构造函数+原型组合模式
function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.sayHi = function() {
    alert("Hi, I'm " + this.name);
};

var zhangsan = new Person("张三", 20);
var lisi = new Person("李四", 21);
alert(zhangsan.sayHi === lisi.sayHi); // true

在Person中，sayHi 是 原型成员（prototype），name 和 age 是 特权成员（privileged），它们都是 公共成员（public）。

注：“特权”是道格拉斯提出的名词。道格拉斯·克罗克福德（Douglas Crockford），Web界人称道爷，JSON创立者，《JavaScript语言精粹》做者，JSLint、JSMin、ADsafe开发者。

类的原型带有一个 constructor 属性，指向该类的构造函数（若是从新分配了原型指针，须要手动添加 constructor 属性）；类的实例上会自动生成一个属性指向该类原型（在Chrome上能够经过“__proto__”访问到该对象，而IE上该属性则是不可见的）。
Person、Person的原型、Person的实例间的关系以下：

须要注意的是，原型成员保存引用类型值时需谨慎：

Person.prototype.friends = [];
zhangsan.friends.push("王五");
alert(lisi.friends); // ["王五"]

张三的基友莫名其妙就变成李四的基友了，因此 friends 应该添加为特权成员，而不是原型成员。

2.三、类的结构

综上所述，JS中的类的结构大体以下：

• 类由构造函数和原型组成
• 构造函数中能够声明私有成员和添加特权成员
• 原型中能够添加原型成员
• 私有成员能够被特权成员访问而对原型成员不可见
• 特权成员和原型成员都是公共成员

 

三、继承（Inherit）

---

在JS中继承是如何实现的呢？

3.一、拷贝继承

最简单直接的方式莫过于 属性拷贝：

// 拷贝继承
function extend(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
}
extend(SubClass.prototype, SuperClass.prototype);

这种方式虽然实现了原型属性的继承，但有一个很是明显的缺陷：子类实例没法经过父类的 instanceof 验证，换句话说，子类的实例不是父类的实例。

3.二、原型继承

在 Chrome 的控制台中查看 HTMLElement 的原型，大体以下：

能够清晰看到，HTMLElement 的原型是 Element 的实例，而 Element 的原型又是 Node 的实例，从而造成了一条 原型链（Prototype-chain），JS的原生对象就是经过原型链来实现继承。

这里顺道说下解释器对实例属性的查找过程：

1. 在特权属性中查找
2. 特权属性中没找到，再到原型属性中查找
3. 原型属性中没找到，再到原型的原型属性中查找
4. 直到根原型还没找到，返回 undefined

这就说明为何咱们自定义的类明明没有声明 toString() 方法，但仍然能够访问到，由于全部对象都继承自 Object。

所以，咱们也能够经过原型链来实现继承：

// 原型链继承
function User(name, age, password) {
    // 继承特权成员
    Person.call(this, name, age);
    this.password = password;
}
// 继承原型
User.prototype = new Person();
// 修改了原型指针，需从新设置 constructor 属性
User.prototype.constructor = User;

var zhangsan = new User("张三", 20, "123456");
zhangsan.sayHi(); // Hi, I'm 张三

运行正常，貌似没什么问题，但其实里面仍是有些坑：

父类的构造函数被执行了 2 次：继承特权成员时 1 次，继承原型时又 1 次。
父类初始化两次，这有时会致使一些问题，举个例子，父类构造函数中有个alert，那么建立子类实例时，会发现有两次弹框。
不只如此，还致使了下面的问题。从控制台中查看子类的实例，结构以下：

能够看到子类的原型中也包含了父类的特权成员（直接建立了一个父类实例，固然会有特权成员），只不过由于解释器的属性查找机制，被子类的特权成员所覆盖，只要子类的特权成员被删除，原型中相应的成员就会暴露出来：

delete zhangsan.name;
alert(zhangsan.name); // 此时访问到的就是原型中的name

那怎么办呢？对此道爷提供了一个很实用的解决方案—— 原型式寄生组合继承。

3.三、原型式寄生组合继承

咱们的目的是子类原型只继承父类的原型，而不要特权成员，原理其实很简单：建立一个临时的类，让其原型指向父类原型，而后将子类原型指向该临时类的实例便可。实现以下：

function inheritPrototype(subClass, superClass) {
    function Temp() {}
    Temp.prototype = superClass.prototype;
    subClass.prototype = new Temp();
    subClass.prototype.constructor = subClass;
}
inheritPrototype(User, Person);

由于临时类的构造函数是空实现，子类在继承原型时天然不会执行到父类的初始化操做，也不会继承到一堆乱七八糟的特权成员。

再看下 zhangsan 的结构：

此时，子类实例的原型链大体以下：

 

总结

---

修改后的代码整理以下：

// 用于子类继承父类原型的工具函数
function inheritPrototype(subClass, superClass) {
    function Temp() {}
    Temp.prototype = superClass.prototype;
    subClass.prototype = new Temp();
    subClass.prototype.constructor = subClass;
}

// 父类
function Person(name, age) {
    // 特权成员（每一个实例都有一份副本）
    this.name = name;
    this.age = age;
}
// 原型成员（全部实例共享）
Person.prototype.sayHi = function() {
    alert("Hi, I'm " + this.name);
};

// 子类
function User(name, age, password) {
    // 继承父类特权成员（在子类中执行父类的初始化操做）
    Person.call(this, name, age);
    // 添加新的特权成员
    this.password = password;
}
// 继承父类原型
inheritPrototype(User, Person);
// 重写父类原型方法
User.prototype.sayHi = function() {
    alert("Hi, my name is " + this.name);
};
// 扩展子类原型
User.prototype.getPassword = function() {
    return this.password;
};

到此为止，咱们已经比较完美地实现了类和类的继承。

但每一个类、每一个子类、每一个子类的子类，都要这么分几步写，也是很蛋疼的。对象有对象工厂，类固然也能够搞个 类工厂（Class Factory），江湖上已有很多现成的类工厂，让咱们能够从统一规范的入口来生成自定义类。（见：JavaScript几种类工厂实现原理剖析）