Javascript继承详解

一、经典的继承方式

[Douglas Crockford]
http://javascript.crockford.com/prototypal.html
http://javascript.crockford.com/inheritance.html
[John Resig]
http://ejohn.org/blog/simple-javascript-inheritance/
[Dean Edwards]
http://dean.edwards.name/weblog/2006/03/base/
[prototype]
http://www.prototypejs.org/learn/class-inheritance
[Mootools]
http://mootools.net/core/docs/1.5.1/Class/Class

二、this、constructor、prototype

2.1 this

this表示当前对象，如果在全局范围内使用this，则指代当前页面对象window；如果在函数中使用this，则this指代什么是根据运行时此函数在什么对象上被调用。

【注意】：函数中的this是在运行时决定的，而不是函数定义时。

call和apply可以用来改变函数中this的指向。

function foo() {
    console.log(this.fruit);
}

var fruit = "apple";
var obj = {
    fruit: "orange"
};

foo.apply(window); // "apple"
foo.apply(obj); // "orange"

【注意】：
call和apply的作用相同，唯一的区别是两个函数的参数不同。

2.2 prototype

2.3 constructor

constructor始终指向创建当前对象的构造函数。例如下面的例子：

var arr = [1, 56, 34, 12];
console.log(arr.constructor === Array); // true

// 等价于 var foo = new Function();
var Foo = function() { };
console.log(Foo.constructor === Function); // true

// 由构造函数实例化一个obj对象
var obj = new Foo();
console.log(obj.constructor === Foo); // true

// 将上面两段代码合起来，就得到下面的结论
console.log(obj.constructor.constructor === Function); // true

但是当constructor遇到prototype时，有趣的事情就发生了。
我们知道每个函数都有一个默认的属性prototype，而这个prototype的constructor默认指向这个函数。如下例所示：

function Person(name) {
    this.name = name;
};
Person.prototype.getName = function() {
    return this.name;
};
var p = new Person("ZhangSan");

console.log(p.constructor === Person); // true
console.log(Person.prototype.constructor === Person); // true
// 将上两行代码合并就得到如下结果
console.log(p.constructor.prototype.constructor === Person); // true

当时当我们重新定义函数的prototype时（注意：和上例的区别，这里不是修改而是覆盖）， constructor的行为就有点奇怪了，如下示例：

function Person(name) {
    this.name = name;
};
Person.prototype = {
    getName: function() {
        return this.name;
    }
};
var p = new Person("ZhangSan");
console.log(p.constructor === Person); // false
console.log(Person.prototype.constructor === Person); // false
console.log(p.constructor.prototype.constructor === Person); // false

为什么呢？
原来是因为覆盖Person.prototype时，等价于进行如下代码操作：

Person.prototype = new Object({
    getName: function() {
        return this.name;
    }
});

而constructor始终指向创建自身的构造函数，所以此时Person.prototype.constructor === Object，即是：

function Person(name) {
    this.name = name;
};
Person.prototype = {
    getName: function() {
        return this.name;
    }
};
var p = new Person("ZhangSan");
console.log(p.constructor === Object); // true
console.log(Person.prototype.constructor === Object); // true
console.log(p.constructor.prototype.constructor === Object); // true

怎么修正这种问题呢？方法也很简单，重新覆盖Person.prototype.constructor即可：

function Person(name) {
    this.name = name;
};
Person.prototype = new Object({
    getName: function() {
        return this.name;
    }
});
Person.prototype.constructor = Person;
var p = new Person("ZhangSan");
console.log(p.constructor === Person); // true
console.log(Person.prototype.constructor === Person); // true
console.log(p.constructor.prototype.constructor === Person); // true