javascript类式继承设计模式简单介绍
一般说来,我们在设计类的时候,实际上就是希望能减少重复性的代码,使用继承可以完美的做到这一点,借助继承机制,你可以在现有类的基础上再次进行设计并且充分利用它们已经具备的各种方法,而对设计的修改也更为轻松。举例说明:
function Person(name){
this.name = name;
}
Person.prototype.getname = function(){
return this.name;
}
function Bloger(name,blog){
Person.call(this,name);
this.blog = blog;
}
var bloger = new Bloger("antzone","");
console.log(bloger.name=="antzone");
console.log(bloger.blog)
console.log(bloger.getname()=="antzone");
通过上例可以看到,Bloger在其内部通过call动态调用了其父类Person的原生属性和方法,即可以理解为Bloger继承了Person,成为它的一个子类,但是细心的同学会发现,Person原型对象中的方法,仅仅依靠call,是不能继承过来的,这也就是会提示"bloger.getname is not a function"的原因所在了。不过不用担心,对上述代码稍作处理,即可解决这个问题:
function Person(name){
this.name = name;
}
Person.prototype.getname = function(){
return this.name;
}
function Bloger(name,blog){
Person.call(this,name);
this.blog = blog;
}
/*请注意以下两行代码*/
Bloger.prototype = new Person();
Bloger.prototype.constructor = Bloger;
var bloger = new Bloger("antzone","");
console.log(bloger.name=="antzone");
console.log(bloger.blog)
console.log(bloger.getname()=="antzone");
在这里需要对这两行代码解释一下,我们知道,每一个构造函数都有一个prototype属性,这个属性指向该构造函数的原型对象,其实原型对象也是实例对象,只不过在原型对象中定义的属性和方法可以提供给所有的实例对象共享,由此可以得出,新添加两行代码的意图就是设置子类的原型对象指向父类的一个实例化对象,而父类的实例化对象会把父类的原型属性方法统统继承过来,这样也就达到了我们的目的,子类的原型继承了所有父类实例对象具有的属性和方法。
但是还应该注意Bloger.prototype.constructor = Bloger;这行代码,因为把子类的prototype设置为父类的实例时,其constructor属性会指向父类,所以要设置子类原型的constructor重新指向子类,至此,已经完美实现了javascript的类式继承。
为了简化子类的声明,可以把扩展子类的整个过程写名为extend的函数中,作用就是基于一个给定的类结构去创建一个新的类:
function extend(childClass,parentClass){
var F = new Function();
F.prototype = parentClass.prototype;
childClass.prototype = new F();
childClass.prototype.constructor = childClass;
}
有了这个extend这个函数,就可以很方便的扩展子类了,只需调用这个函数即可,上述添加的两行代码可改为extend(Bloger,Person), 一样可以实现完全继承。
相关推荐
-
jQuery如何创建一个新的元素对象
使用jQury创建一个新元素对象非常的简单,下面就是一个非常简单的方式。代码如下:vr $div=$(本站的url地址是实例3)当然生成的也是一个jQury对象,
-
outerText和innerText属性的区别实例介绍
在开始文章技术细节的区别介绍之前,先来阐明一个标准上的区别:outrTxt是符合W3C标准的,而innrTxt则是非标准的。下面来先来看一段代码实例:
-
js prototype属性使用代码实例
关于rototy属性的用法这里不多介绍了,具体可以参阅jvscrit rototy原型一章节。下面就分享一段关于rototy属性使用的代码实例,需要的朋友可以做一下参考。代码如
-
javascript面向对象编程概念简单介绍
关于面向对象这个术语,大家应该都不陌生了,铺天盖地都是。但是很多朋友还是不太明白到底什么是面向对象的编程,下面就用通俗的语言做一下介绍。面向对象简单的说就是将功能封装到对象里,强调的是具备某种功能的对
-
javascript面向对象编程的非构造函数的继承
关于面向对象的封装可以参阅jvscrit面向对象编程关于封装简单介绍一章节。关于非构造函数的继承可以参阅jvscrit面向对象编程的构造函数的继承一章节。一.什么是非构造函数的继承:比