对象之间继承的 5 中方法, 现在有一个"动物"对象的构造函数.
一.构造函数绑定 :使用call 或 apply 方法将父对象的构造函数绑定在子对象上
function animal(){ this.species = "动物"; } function cat(name,color){ animal.apply(this, arguments);//animal绑定在cat上 this.name = name; this.color = color; } var cat1 = new cat("大毛","黄色"); alert(cat1.species);//猫科动物
二.prototype模式,使用prototype属性。
cat.prototype= new animal();
//"猫"的prototype对象,指向一个animal的实例,那么所有"猫"的实例,就能继承animal了
三.直接继承prototype :对第二种方法改进. 由于animal对象中, 不变的属性都可以直接写入 animal.prototype. 所以,我们也可以让 cat()跳过aniaml(),直接继承animal.prototype.
function animal(){} animal.prototype.species= "动物"; function cat(name,color){ this.name = name; this.color = color; } cat.prototype=animal.prototype; var cat1 = new cat("大毛","黄色"); alert(cat1.species);//猫科动物
优点是效率比较高,比较省内存. 缺点是cat.prototype和animal.prototype现在指向了同一个对象,对cat.prototype的修改,会反映到animal.prototype.
所以,上面这一段代码其实是有问题的.请看第二行
cat.prototype.constructor = cat;
这一句话实际上把aniaml.prototype对象的constructor属性也改掉了!
alert(animal.prototype.constructor);//cat
四.利用空对象作为中介: 利用一个空对象作为中介, 由于"直接继承prototype"存在上述的缺点
var f = function(){};
f.prototype = animal.prototype;
cat.prototype = new f();
cat.prototype.constructor = cat;
f是空对象,所以几乎不占内存.这时,修改cat的prototype对象,就不会影响到animal的prototype对象.
alert(animal.prototype.constructor);//animal
我们将上边的方法,封装成一个函数,便于使用.
这个extend函数,就是yui库如何实现继承的方法.
另外,说明一点,函数体最后一行
child.uber = parent.prototype;
意思是为子对象设一个uber属性, 这个属性直接指向父对象的prototype属性.这等于在子对象上打开一条通道,可以直接调用父对象的方法.这一行放在这里,只是为了实现继承的完备性,纯属备用性质
function animal(){} animal.prototype.species= "动物"; function cat(name,color){ this.name = name; this.color = color; } function extend(child,parent) { var f= function () {}; f.prototype=parent.prototype; child.prototype= new f(); child.prototype.constructor=child; child.uber= parent.prototype; } //使用方法如下: extend(cat,animal); var cat1 = cat("大毛","黄色"); alert(cat1.species)
五.拷贝继承 把父对象的所有属性和方法拷贝进子对象实现继承
//首先,还是把animal的所有不变属性, 都放到它的prototype对象上. function animal(){}; animal.prototype.species = "动物"; function cat(name,color){ this.name = name; this.color = color; } //然后,再写一个函数,实现属性拷贝的目的. function extend2(child, parent){ var p = parent.prototype; var c = child.prototype; for(var i in p){ c[i] = p[i]; } c.uber = p; } extent2(cat,animal); var cat1 = new cat("大毛","黄色"); alert(cat1.species);//动物
这个函数的作用,就是将父对象的prototype对象中的属性,一一拷贝给child对象的prototype对象.
如对本文有疑问, 点击进行留言回复!!
vue脚手架安装以及vue脚手架创建项目(详细步骤),看这篇文章就行了,小白也能创建自己的项目
JavaScript递归函数详解:如何使用递归及简单的递归案例
JavaScript 中的break、continue、return的用法和区别
网友评论