js中构造函数的继承

青耳~

已于 2022-05-01 18:16:53 修改

阅读量2.4k

点赞数 5

分类专栏：笔记文章标签： javascript 原型模式前端

于 2022-04-29 16:40:51 首次发布

本文链接：https://blog.csdn.net/ilkcyc/article/details/124499240

版权

笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

function Animal(){
    this.species = "动物";
    this.zoomName = '东郊公园';
    this.age = 2;
}
Animal.prototype.age = 3;
function Cat(name, color){
    this.name = name;
    this.color = color;
}
// 怎么使得“猫”继承“动物”呢？

假设有业务场景：猫需要继承动物的属性，如何实现？

可以用以下四种方式：

构造函数绑定：使用call或者apply方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行：

Father.apply(this, arguments); 或者 Father.call(this, arguments);

显然，这种实现方式下，猫的实例对象完全继承了动物的所有属性。

/* 第一种：构造函数绑定 。最简单的方法。
* 使用call或者apply方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行：
* 父.apply(this, arguments); 或  父.call(this, arguments); 
*/
/* Cat举例 */
function Cat2(name, color){
//  Animal.apply(this, arguments);
 Animal.call(this, arguments);
 this.name = name;
 this.color = color;
}
var catMao = new Cat2('咪咪', '白色');
console.log(catMao);

prototype模式：使得子类的prototype指向父类的任意一个实例，即：在定义子对象的构造函数定义完成后，加两行：

Son.prototype = new Father ();

Son.prototype.constructor = Son;


/* Cat举例 */

/* 第二种：prototype模式。最常见的方法。
如果“猫”的prototype对象，指向一个Animal的实例，那么所有“猫”的实例，就能继承Animal了。
特别的：
        因为每一个实例也有一个constructor属性，默认调用prototype对象的constructor属性，
     而且任何一个prototype对象都有一个constructor属性，指向它的构造函数，
     如果替换了构造函数o的prototype对象（默认是：o.prototype = {}），
     那么，下一步必然是为新的prototype对象加上constructor属性，并将这个属性指回原来的构造函数o。
o.prototype.constructor = o; 
*/
// Cat举例
function Cat3(name, color){
     this.name = name;
     this.color = color;
}
console.log('Cat3****prototype=', Cat3.prototype); // {}
Cat3.prototype = new Animal();
console.log('Cat3****继承Animal后***prototype=;', Cat3.prototype); //  Animal { species: '动物', zoomName: '东郊公园' }
console.log('Cat3*****继承Animal后***构造函数=', Cat3.prototype.constructor); //  [Function: Animal]

/* 因为上一步修改Cat3的prototype，导致继承链紊乱因此手动纠正，使得Cat3的原型的构造函数还是Cat3 */
Cat3.prototype.constructor = Cat3; 
console.log('Cat3****先继承Animal****再纠正回来Cat3***prototype=', Cat3.prototype); //  Animal { species: '动物', zoomName: '东郊公园' }
console.log('Cat3*****先继承Animal****再纠正回来Cat3****构造函数=', Cat3.prototype.constructor); //  [Function: Cat3]

let mao3 = new Cat3('猫3','黑色');
console.log('Cat3继承了Animal后的****cat3实例=', mao3); // { name: '猫3', color: '黑色' }
console.log('Cat3实例描述=', `我的动物园名字:${mao3.zoomName},我是：${mao3.species},我的年龄：${mao3.age},我的名字:${mao3.name},我的颜色:${mao3.color}`); // 我的动物园名字:东郊公园,我是：动物,我的年龄：2,我的名字:猫3,我的颜色:黑色

显然，以方式二实现继承后，"猫"的实例对象，本身没有Animal的实例属性（age，zoomName,species）。但是，为什么Cat3实例能够取到他们呢？原因是：原型链继承。即：访问实例本身没有的属性，那么就在它的原型链上查找，即会找到自己从Animal继承的prototype里面，从而可以访问到“age，zoomName,species”这几个属性了。

直接继承prototype：第三种方法是对第二种方法的改进。由于Animal对象中，不变的属性都可以直接写入Animal.prototype。所以，我们可以让Cat()跳过Animal()，直接继承Animal.prototype。

第一步：将Father（父构造函数）改写成一个空函数，并抽离Father的不变属性,并写入到prototype上。即：

Father(){}

Father.prototype.commonProName= value;

第二步：将Cat的prototype对象指向Animal的prototype对象，并且纠正Cat的构造函数；这样就完成了继承。即：

Son.prototype=Father.prototype；

Son.prototype.constructor = Son;

function Animal1 () {}
Animal1.prototype.species = '动物1';
Animal1.prototype.zoomName = '东郊公园1';
Animal1.prototype.age = 4;
console.log('Cat继承前的****prototype=',Cat.prototype);
console.log('Cat继承前的****constructor=',Cat.prototype.constructor);

// 2、直接继承prototype：将Cat的prototype对象指向Animal1的prototype对象，并必须纠正Cat的构造函数,这样就完成了继承。
function Cat(name, color){
    this.name = name;
    this.color = color;
}
Cat.prototype.catSpecies = "加菲猫";
Cat.prototype = Animal1.prototype;
console.log('Cat继承Animal1的prototype后*****prototype=',Cat.prototype);
console.log('Cat继承Animal1的prototype后的*****constructor=',Cat.prototype.constructor);

// 注意：既然替换了某个prototype对象，必须要使得新的prototype加上构造函数，并且constructor指向原来的构造函数。

Cat.prototype.constructor = Cat;
console.log('Cat继承Animal1的prototype后,纠正的*****constructor=',Cat.prototype.constructor);

var mao4 = new Cat('猫4','蓝色');
console.log('Cat继承后的****cat实例=', mao4);
console.log('Cat4实例描述=', `我是可爱的${mao4.species}，来自${mao4.zoomName}动物园,我${mao4.age}岁了;我属于${mao4.catSpecies},取名为${mao4.name},有着漂亮的${mao4.color}毛。`);

思考：

为什么猫的种类为undefined了？

分析：

在prototype赋值语句执行后，Cat本身的protptype被完整替换了，所以继承后的prototype里面再无“catSpecies”属性，仅是有Animal.prototype包含的属性。那么自然也访问不到了。

解决：

可以将它们两句调换位置，即可：

Cat.prototype = Animal1.prototype;

Cat.prototype.catSpecies = "加菲猫";

特点：效率高，省内存，副作用大。

副作用：

Son.prototype与Father.prototype指向同一个对象，当修改任何一个是都会影响另一个，这是我们不想看到的。

那如何避免这个副作用呢？请看第四种：

利用空对象作为Son和Father的中介，实现继承。即：

逐步分析：

/* 第四种： 用空对象作为Son和Father的继承中介。弥补了第三种方式存在的副作用。*/
function Animal(){
    this.species = "动物";
    this.zoomName = '东郊公园';
    this.age = 2;
}
Animal.prototype.animalProp = 3;
function Cat(name, color){
    this.name = name;
    this.color = color;
}
// 1、定义一个空函数，进而可以产生一个prortotype空对象。
var F = function (){};
// 2、使得空对象的prototype与Father.prototype指向同一个对象（完全拷贝prototype），即F继承了Animal。
F.prototype = Animal.prototype; // 直接继承prototype
F.prototype.fProp="123123"; // 此时也改了Animal的prototype
// 检查F的prototype和constructor
console.log('F继承Animal的prototype后的*****prototype=',F.prototype);
console.log('F继承Animal的prototype后的*****constructor=',F.prototype.constructor);

// 3、使Cat的prototype指向F的一个实例。它是完全删除了Cat的prototype 对象原先的值，然后赋予一个新值(F的空prototype)。那么Cat就可以继承到F。
Cat.prototype = new F(); 
// 检查Cat的prototype和constructor
console.log('Cat继承F的prototype后的*****prototype=',Cat.prototype);
console.log('Cat继承F的prototype后的*****constructor=',Cat.prototype.constructor);
// 4、纠正构造函数指向原来的函数。
Cat.prototype.constructor = Cat;
//改变Cat的prototype
Cat.prototype.catSize="small"; // 此时，仅仅改了自己的prototype
Cat.uber = Animal.prototype;
console.log('Cat继承F的prototype后纠正的*****constructor=',Cat.prototype.constructor);

// 检查大家的prototype
console.log('Animal最后的prototype=',Animal.prototype);
console.log('F*****最后的prototype=',F.prototype);
console.log('Cat最后的prototype=',Cat.prototype);
var cat5 = new Cat();
// 检查一下Cat实例的属性有哪些
for(let key in cat5){
    console.log('猫的属性枚举****************:',key);
    // name、color、constructor来自Cat
    // catSize来自Cat.prototype
    // ...
}
console.log(cat5.species); // undefined，无法访问Animal的私有属性

cat5的属性：构造函数（Cat）里面私有的，constructor，继承自F的prototype里面的，继承自Animal的prototype里面的。

那么，第四种方法，可以简化实现为以下的内容：

function Animal(){
    this.species = "动物";
    this.zoomName = '东郊公园';
    this.age = 2;
}
Animal.prototype.animalProp = 3;
function Cat(name, color){
    this.name = name;
    this.color = color;
}

function extendsHandle(Father,Son){
    console.log('handler:',Father,Son);
    var F = function(){};
    F.prototype = Father.prototype;
    F.prototype.fProp = "123";
    Son.prototype = new F();
    Son.prototype.constructor = Son;
    Son.prototype.sonProp="abc";
    Son.uber= Father.prototype;// uber属性类似super。
}
extendsHandle(Animal, Cat);
var cat5 =new Cat('猫5', "绿色");
console.log('Cat的实例:', cat5);
// cat5没有Animal的三个私有属性。
console.log('Cat5的动物园名称:', cat5.zoomName);

for(let key in cat5){
 console.log('Cat的实例属性有:', key);
}