js面向对象2：构造函数的继承

最新推荐文章于 2025-07-26 09:56:45 发布

原创最新推荐文章于 2025-07-26 09:56:45 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍JavaScript中使用原型链实现继承的方法，通过修改构造函数的prototype属性，使子类能够继承父类的属性和方法。文章详细解释了直接继承和利用空对象作为中介的两种方式，避免了直接继承可能带来的问题。

现在有个动物对象的构造函数

function Animal(){

this.species="动物";

}

和一个猫的构造函数

function Cat(name,color){

　　　　this.name = name;

　　　　this.color = color;

　　}

如何让猫继承动物？

prototype模式

如果"猫"的prototype对象，指向一个Animal的实例，那么所有"猫"的实例，就能继承Animal了。

Cat.prototype=new Animal();
              // 将Cat.prototype指向一个Animal的实例
Cat.prototype.constructor=Cat;
             //任何一个prototype对象都有constructor属性指向它的构造函数。
             //因为每一个实例也有一个constructor属性，默认调用prototype对象的constructor属性。
             //因为第一行，所以它的实例.constructor属性也会指向Animal
             //这显然会导致继承链的紊乱,所以在这行要把constructor改回去
var cat1=new Cat('大黑','黑色');
alert(cat.species);//动物

利用空对象作为中介

先改写Animal

function Animal(){};
Animal.prototype.species="动物";

由于直接继承prototype存在缺点：
所以我们使用一个空对象

var F=function(){};
F.prototype=Animal.prototype;
Cat.prototype=new F();
Cat.prototype.constructor=Cat;
   //修改Cat的prototype对象，就不会影响到Animal的prototype对象。

function extend(Child,Parent){
    var F=function(){};
    F.prototype=Parent.prototype;
    Child.prototype=new F();
    Child.prototype.constructor=Child;
  
}
extend(Cat,Animal);
var cat1=new Cat("大黄","黄色");
alert(cat1.species); // 动物