不一样的Javascript（14）——继承

1. 首先我们定义一个Person类，每个Person实例都有一个name和age属性。同时，每个实例还能调用函数toString输出自己的name和age，并调用greeting函数跟别人打招呼：

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.greeting = function() {
    return "Hello. I'm " + this.name + ".";
}

Person.prototype.toString = function() {
    return "name is " + this.name + "; age is " + this.age + "; ";
}

我们可以调用构造函数Person创建实例，并访问实例的属性和调用函数。比如如下代码：

console.log(peter.name); // Peter
console.log(peter.greeting()); // Hello. I'm Peter.
console.log(peter.toString()); // name is Peter; age is 30;

接下来我们定义一个Employee类，每个Employee实例除了有name和age属性外，还有个属性id。很自然地我们希望Employee类能从Person类继承，并通过Person的构造函数自动初始化属性name和age：

function Employee(name, age, id) {
    this.base = getPrototypeOfBase.call(this);
    
    this.base.constructor.call(this, name, age);
    this.id = id;
}

Employee.prototype = new Person;

function getPrototypeOfBase() {
    var prototype = Object.getPrototypeOf(this);
    return Object.getPrototypeOf(prototype);
}

在上述代码中，我们先创建一个Person的实例，并把它赋值给Employee的prototype。这样就表明Employee是从Person继承过来的。为了能在构造函数Employee里调用它基类的构造函数，我们先用函数getPrototypeOfBase得到基类Person的prototype，接着再通过这个prototype的constructor属性调用构造函数Person。

由于我们在Employee里面添加了新的属性id，因此我们需要为Employee定义新的toString函数：

Employee.prototype.toString = function() {
    var strPerson = this.base.toString.call(this);
    var strEmployee = strPerson + "id " + this.id + "; ";
    return strEmployee;
};

和调用基类的构造函数一样，我们仍然需要通过基类的prototype调用基类的toString函数。接着我们可以创建子类Employee的对象：

var harry = new Employee("Harry", 32, 9001);
console.log(harry.age); // 32
console.log(harry.id); // 9001
console.log(harry.greeting()); // Hello. I'm Harry.
console.log(harry.toString()); // name is Harry; age is 32; id 9001;

当我们试图访问Employee自己的属性（如id）的时候，直接得到该属性。如果发现一个属性自己并没有定义（比如age），那么将会沿着prototype链去它的基类中查找。调用函数的情况类似。当调用函数toString时，由于Employee定义了自己的toString，那么就调用Employee的toString。由于Employee没有定义自己的greeting函数，那么将会调用它基类Person的greeting函数。

2. prototype链有可能产生问题。例如如下代码：

function Base() {
    this.colors = ["red", "green", "blue"];
}

var base = new Base();

var derived1 = Object.create(base);
console.log(derived1.colors); // ["red", "green", "blue"]

var derived2 = Object.create(base);
console.log(derived2.colors); // ["red", "green", "blue"]

derived1.colors.push("white");
console.log(derived1.colors); // ["red", "green", "blue", "white"] 
console.log(derived2.colors); // ["red", "green", "blue", "white"]

在上述代码中，我们本来只想往derived1的colors里添加一个颜色"white"，但derived2的colors同样也添加了。这是因为他们有相同的prototype。