JavaScript定义类的两种方式和继承

dazhilao

浏览: 246067 次
性别:
来自: 广州

最近访客更多访客>>

zhuhao

dj2437

ldwnt

tank924

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

JavaScript prototype 数据结构 XHTML HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript</title>
<script type="text/javascript" src="jquery.min.js"></script>

<!-- JavaScript 本身是一种面向对象的语言，
它所涉及的元素根据其属性的不同都依附于某一个特定的类。
我们所常见的类包括：数据变量（Array）、逻辑变量（Boolean）、
日期变量（Date）、结构变量（Function）、数值变量（Number）、
对象变量（Object）、字符串变量（String）等

1.所有JavaScript内部对象都有只读的prototype属性。
可以向其原型中动态添加功能（属性和方法），
但该对象不能被赋予不同的原型。然而，
用户定义的对象可以被赋予新的原型（继承）。

2.为已有的类型添加方法

3为自己的类创建方法
-->

<script type="text/javascript">

//定义类
function Car(sColor, iDoors, iMpg){
	this.color = sColor;
	this.doors = iDoors;
	this.mpg = iMpg;
	this.drivers = new Array("Mike", "Sue");
}

function Car2(sColor, iDoors,iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("Mike", "Sue");

if(typeof Car2._initialized == "undefined") {
	Car2.prototype.showColor = function(){
		alert(this.color);
	}
}

}

function btn1_onclick(){
	var oCar1 = new Car("red", 4, 23);
	var oCar2 = new Car("blue", 3, 25);

	oCar1.drivers.push("Matt");

	alert(oCar1.drivers);
	alert(oCar2.drivers);

	oCar1.showColor();
}

function TestObjectA() {
	this.MethodA = function(){
		alert("TestObjectA.MethodA()");
	}

}

function TestObjectB(){
	this.MethodB = function(){
		alert("TestObjectB.MethodB()");
	}
}

//继承
TestObjectB.prototype = new TestObjectA();

function btn3_onclick(){
	var t = new TestObjectB();
	t.MethodA();
	t.MethodB();
}



function btn2_onclick(){
	var oCar1 = new Car2("red", 4, 23);
	var oCar2 = new Car2("blue", 3, 25);

	oCar1.drivers.push("Matt");

	alert(oCar1.drivers);
	alert(oCar2.drivers);

	oCar1.showColor();
}

Car.prototype.showColor = function(){
	alert(this.color);

}
$(function(){
	
});
</script>
</head>

<body>
<button id="btn1" onclick="btn1_onclick()">btn1</button>
<button id="btn2" onclick="btn2_onclick()">btn2</button>
<button id="btn3" onclick="btn3_onclick()">btn3</button>
</body>
</html>

分享到：