js的构造函数继承的几种类型

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js的构造函数继承的几种类型相关的知识,希望对你有一定的参考价值。

function animale(){

         this.species ="猫科";

}

function cat(){

       this.name=name;  

       this.color=color

}

1:基于apply()方法和call()方法

在子元素中加入一行代码

function cat(){

      this.name=name;

      this.color=color;

      animale.apply(this,arguments);  //这里的this就是指当前调用对象

}

var cat1=new cat("大黄","白色");

var cat2=new cat("戈薇","灰色");

console.log(cat1.species);

console.log(cat2.species);

缺点:不能调用父类原型类中的方法和属性

eg:animale.prototype.show=function(){alert(this.color)}

cat1.show();>-----undefined

2:基于原型的继承

cat.prototype=new animale();  //定义玩这句后cat.prototype.constructor就指向了animale

cat.prototype.constructor=cat;

var cat3 =new cat("大黄","白色");

var cat2=new cat("戈薇","灰色");

console.log(cat2.species);

//可以访问animale原型中的方法和属性,但是不能直接访问父类的构造函数,第一代改变了父类的引用类型的值,其他的子代也会改变,但基本类型的值不会随着改变。

eg:cat3.species="犬科";

console.log(cat2.species);   >-----猫科

3:利用空媒介进行封装处理(基于直接用原型继承的改变)

我们将不需要变化的数据放到父类 的原型里面

animale.prototype.species="猫科"

function f(){}   //空函数,F是空对象,所以几乎不占内存

f.prototype=animale.prototype; 

cat.prototype = new f();

cat.prototype.constructor =cat;

我们在把上述代码通过一个函数进行封装

function excent(child,parent){

     var F=function(){}

     F.prototype=parent.prototype;

     child.prototype=new F();

     child.prototype.constructor=child;

}

excent(cat,animale);

var cat1 = new Cat("大毛","黄色");

  alert(cat1.species); // 动物

以上是关于js的构造函数继承的几种类型的主要内容,如果未能解决你的问题,请参考以下文章

JS继承的几种方式

js里实现继承的几种方式

javascript的几种继承

js原型继承的几种方式

JS面向对象的几种写法

js原型继承的几种方式