js 模拟“类”继承

原创 2013年12月04日 10:18:31

 javascript中实际上是没有类这个概念的,他的类是在方法的基础之上的,因此实现类继承的思想是把父类的属性和方法指向子类。(个人理解)

 

JavaScript 中的继承可以通过原型链来实现,调用对象上的一个方法,由于方法在JavaScript 对象中是对

另一个函数对象的引用,因此解释器会在对象中查找该属性,如果没有找到,则在其内部对象prototype 对象

上搜索,由于prototype 对象与对象本身的结构是一样的,因此这个过程会一直回溯到发现该属性,则调用该

属性,否则,报告一个错误。关于原型继承,我们不妨看一个小例 子

 

function Base(){
	this.baseFunc=function(){
		alert("base behavior");
	}
}

function Middle(){
	this.middleFunc=function(){
		alert("middle behavior");
	}
}

Middle.prototype=new Base();

function Final(){
	this.finalFunc=function(){
		alert("final behavior");
	}
}

Final.prototype=new Middle();

function test(){
	var obj = new Final();
	obj.baseFunc();//base behavior
	obj.middleFunc();//middle behavior
	obj.finalFunc();//final behavior
}

test();

 

 

例子二:

function ClassA(sColor) {
	this.color = sColor
}
ClassA.prototype.sayColor = function () {
	alert(this.color);
}
function ClassB(sColor, sName) {
    //执行ClassA(sColor)方法,但是里面的this现在已经是ClassB了,但是sayColor方法没有继承过来,因为是在prototype原型链表后的,只有new ClassA才能继承,这个方法的目的就是实现属性的继承
	ClassA.call(this, sColor);
	this.name = sName;
}

//将ClassA链表后面的方法赋值给ClassB.prototype,这样sayColor方法也就在ClassB链表后面,实现方法继承
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () {
	alert(this.name);
}
var obja = new ClassA("RED");
var objb = new ClassB("blue", "huangbiao");
obja.sayColor();//RED
objb.sayColor();//blue
objb.sayName();//huangbiao

 

 使用运行构造方法实现继承

function ClassA(sColor) {
	this.color = sColor;
	this.sayColor = function () {
		alert(this.color);
	}
}
function ClassB(sColor) {}
function ClassB(sColor, sName) {
	//定义一个构造方法属性,然后运行这个构造方法,实际上就是运行父类ClassA,将它的属性和方法全部继承过来,因为这个this指向的是ClassB而不是ClassA了
	this.struct = ClassA;
	this.struct(sColor);
	//删除这个构造属性,但是够着属性里面的内容已经继承过来了,因此删除这个多余的属性
	delete this.struct;

	this.name = sName;
	this.sayName = function () {
		alert(this.name);
	}
}
var obja = new ClassA("RED");
var objb = new ClassB("blue", "huangbiao");
alert(objb.color);//blue
obja.sayColor();//RED
objb.sayColor();//blue
objb.sayName();//huangbiao

 

  • 大小: 14.2 KB

相关文章推荐

js模拟java的继承

最近在通过JavaScript设计模式研究js的继承. 但是作为java出身,由于java提供了语言级别的继承,对于js要使用其他手段来实现继承还是有比较多的障碍的,故写一篇博客来记录自己的一个学习心...

JS封装的模拟ComboBox的类

  • 2009年09月02日 22:03
  • 6KB
  • 下载

js 模拟实现php类中的静态变量

js是弱类型语言,而且对面向对象编程支持度不够高,它没有命名空间也没有类,但是可以间接的实现类的部分功能,今天就来鲁一鲁js实现类中的静态变量: 静态变量:简单的理解就是每个类的实例所共享的,一个实...

JS高级编程之模拟常用java类

前言 你是否遇到过这种情况:在进行javascript编程的时候,想要拼接一个很长的字符串,如果你依然使用“+”操作符进行处理,说明你真的狠业余;也许聪明的你会想到java中有一个叫StringBui...

JS模拟下拉选项框

  • 2016年11月16日 11:00
  • 115KB
  • 下载

js模拟不规则键盘

  • 2012年11月01日 23:44
  • 3KB
  • 下载

js模拟Ctrl+C复制、Ctrl+V粘贴功能之tabindex、focus、keyCode

话不多说,今天遇到了一个大坑,是这样的,一颗DOM树中有一个节点,要对其实现Ctrl+C复制、Ctrl+V粘贴功能。起初拿到这个任务,我首先想到的是选中它,然后按下Ctrl、C实现复制,再按下Ctrl...

js模拟淘宝首页缓冲幻灯片效果

  • 2015年02月12日 23:56
  • 670KB
  • 下载

html5+js模拟人物走动

  • 2014年08月08日 15:45
  • 2KB
  • 下载

Vue.js模拟微信朋友圈开发demo

我用Vue.js实现微信朋友圈的一些功能,实现展示朋友圈,评论,点赞。  先构造一个vue的实例,对会更改的数据进行双向绑定,  我用JSON伪造模版数据,先实现显示朋友圈的效果,使用v-for方...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js 模拟“类”继承
举报原因:
原因补充:

(最多只允许输入30个字)