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

 

  • 42d78f03-634c-3106-9656-d3141db6fa43-thumb.jpg
  • 大小: 14.2 KB

JavaScript 模拟类(class)的三种方法

将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言。如果你忘了填写用户名,它就跳出一个警告。 如今,它变得几乎无所不能,从前端到后端,有着各种匪夷所思的用途。程序员...
  • wabil
  • wabil
  • 2016年01月08日 09:14
  • 591

javascript:类,成员变量,成员函数,类变量,类方法,继承,多态

javascript:类,成员变量,成员函数,类变量,类方法,继承,多态 1) 类 类的定义:function Circle(r) { this.r = r; } 类的实例化: ...
  • xlx9984
  • xlx9984
  • 2014年03月10日 21:10
  • 716

js 模拟面向对象的方式

首先简单了解一下 面向对象(Object Oriented,OO)是软件开发方法。面向对象的概念和应用已超越了程序设计和软件开发,扩展到如数据库系统、交互式界面、应用结构、应用平台、分布式系...
  • qq_32566003
  • qq_32566003
  • 2017年02月21日 15:24
  • 193

js面向对象的继承--拷贝,类式继承,原型继承

1、拷贝继承 function Aaa(){//父类 this.name='张...
  • sweetllh
  • sweetllh
  • 2017年06月30日 20:15
  • 176

Cocos2d-JS中JavaScript继承

JavaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求。由于Cocos2d-JS引擎是从Cocos2d-x演变而来...
  • tonny_guan
  • tonny_guan
  • 2015年03月17日 08:11
  • 6749

JS的继承和接口

此工具函数没实际意义,只是鉴于EXT的extend方法不太好理解,写了一个简化的extend方法,帮助理解. /** * */ E = {}; E.extend = function(sub, ...
  • songzheng_741
  • songzheng_741
  • 2014年05月09日 20:50
  • 1722

Lua下通过元表模拟OOP编程,继承多态

Lua本身是没有以明确的定义来支持OOP编程的,但是我们却可以通过Lua本身提供的一些特性来间接实现简单的面向对象的编程。...
  • yue7603835
  • yue7603835
  • 2014年12月09日 10:16
  • 3579

Javascript中JSON对象继承实现

1. 关于JSON对象浅拷贝的实现     1.1 函数的实现 /** *Json对象的浅拷贝 * 返回具有父类属性的新的child对象 * @param {Object}...
  • zbw18297786698
  • zbw18297786698
  • 2017年04月01日 14:37
  • 870

js原型链的形式实现类继承

js中虽然没有类的概念,但可以通过构造函数加原型链的方式实现类的继承。下面是一道简单的题目     请使用Js代码写出一个类继承的模型,需包含以下实现:     定义父类和子类,并创建父类和子类的...
  • qq_21794603
  • qq_21794603
  • 2017年05月20日 11:26
  • 422

js面向对象编程:如何实现方法重载

js中如何实现方法重载?这涉及到三个问题 1同名函数的调用问题 2函数中特殊的参数arguments 3如何利用arguments实现方法重载...
  • xuexiaodong2009
  • xuexiaodong2009
  • 2014年07月01日 13:43
  • 1771
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js 模拟“类”继承
举报原因:
原因补充:

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