一个构造函数继承另一个构造函数的原型方法

方法1

function Person() {

}

function Hello() {

}

Person.prototype.name = "lily";
Hello.prototype = Person.prototype;

console.log(Person.prototype);
console.log(Hello.prototype);

 

这样的继承方式很简单，但是有一个问题，就是当Hello构造函数自身添加原型对象或者方法的时候，Person构造函数的原型也会被影响到。

function Person() {

}

function Hello() {

}

Person.prototype.name = "lily";
Hello.prototype = Person.prototype;

console.log(Person.prototype);
console.log(Hello.prototype);

Hello.prototype.sayName = function() {
    console.log(this.name);
}

一般我们都不想要这样的结果，所以这个方法并不可行。

 

方法2 -- 圣杯模式

我们想要实现的继承是在Hello构造函数里添加自身的原型方法时被继承的构造函数Person不被影响到，这里使用的方法是利用一个中间层函数，代码如下：

function Person() {

}

function Hello() {

}

Person.prototype.name = "lily";

let inherit = function(Target, Origin) {
    function F() {}
    F.prototype = Origin.prototype;
    Target.prototype = new F();
    Target.constuctor = Target;
    Target.prototype.uber = Origin.prototype;
}

inherit(Hello, Person);

Hello.prototype.sayName = function() {
    console.log(this.name);
}

console.log(Person.prototype);
console.log(Hello.prototype);

可以看到打印出来的结果，Hello构造函数里新添加的sayName方法并没有影响到Person构造函数。这是因为Hello和Person的原型指向并不是同一个地址了，只是Hello继承了Person的原型而已。

方法二的另一种写法：

let inherit = (function() {
    function F() {}
    return function(Target, Origin) {
        F.prototype = Origin.prototype;
        Target.prototype = new F();
        Target.constuctor = Target;
        Target.prototype.uber = Origin.prototype;
    }
}())