码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-11-02 17:54:13      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:将不   需要   console   this   animal   tor   数据   arguments   构造   

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的构造函数继承的几种类型

标签:将不   需要   console   this   animal   tor   数据   arguments   构造   

原文地址:http://www.cnblogs.com/huagnchucai/p/6023308.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!