JavaScript设计模式学习之“类式继承”

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript设计模式学习之“类式继承”，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2718字，纯文字阅读大概需要4分钟。

内容图文

在做一件事情之前，首先要清楚做这件事情的好处有什么，相信不会有哪个人愿意无缘无故的去做事情。一般说来，我们在设计类的时候，实际上就是希望能减少重复性的代码，使用继承可以完美的做到这一点，借助继承机制，你可以在现有类的基础上再次进行设计并且充分利用它们已经具备的各种方法，而对设计的修改也更为轻松。废话不多说了，举例说明：
代码如下:
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("zhenn","//www.gxlcms.com");
alert(bloger.name=="zhenn");   /*返回ture*/
alert(bloger.blog)   /*提示//www.gxlcms.com*/
alert(bloger.getname()=="zhenn");   /*提示"bloger.getname is not a function"*/

通过上例可以看到，Bloger在其内部通过call动态调用了其父类Person的原生属性和方法（关于call的讲解请参考//www.gxlcms.com/article/62086.htm），即可以理解为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("zhenn","//www.gxlcms.com");
alert(bloger.name=="zhenn");   /*返回ture*/
alert(bloger.blog)   /*提示//www.gxlcms.com*/
alert(bloger.getname()=="zhenn");   /*提示true*/

在这里需要对这两行代码解释一下，我们知道，每一个构造函数都有一个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), 一样可以实现完全继承！

内容总结

以上是互联网集市为您收集整理的JavaScript设计模式学习之“类式继承”全部内容，希望文章能够帮你解决JavaScript设计模式学习之“类式继承”所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---