1、继承第一种方式：对象冒充
function Parent(username){
this.username = username
this.hello = function(){
alert(this.username)
}
}
function Child(username,password){
//通过以下3行实现将Parent的属性和方法追加到Child中，从而实现继承
//第一步：this.method是作为一个临时的属性，并且指向Parent所指向的对象，
//第二步：执行this.method方法，即执行Parent所指向的对象函数
//第三步：销毁this.method属性，即此时Child就已经拥有了Parent的所有属性和方法
this.method = Parent
this.method(username)//最关键的一行
delete this.method
this.password = password
this.world = function(){
alert(this.password)
}
}
var parent = new Parent("zhangsan")
var child = new Child("lisi","123456")
parent.hello()
child.hello()
child.world()
2、继承第二种方式：call()方法方式
call方法是Function类中的方法
call方法的第一个参数的值赋值给类(即方法)中出现的this
call方法的第二个参数开始依次赋值给类(即方法)所接受的参数
function test(str){
alert(this.name + " " + str)
}
var object = new Object()
object.name = "zhangsan"
test.call(object,"langsin")//此时，第一个参数值object传递给了test类(即方法)中出现的this，而第二个参数"langsin"则赋值给了test类(即方法)的str
function Parent(username){
this.username = username
this.hello = function(){
alert(this.username)
}
}
function Child(username,password){
Parent.call(this,username)
this.password = password
this.world = function(){
alert(this.password)
}
}
var parent = new Parent("zhangsan")
var child = new Child("lisi","123456")
parent.hello()
child.hello()
child.world()
3、继承的第三种方式：apply()方法方式
apply方法接受2个参数，
A、第一个参数与call方法的第一个参数一样，即赋值给类(即方法)中出现的this
B、第二个参数为数组类型，这个数组中的每个元素依次赋值给类(即方法)所接受的参数
function Parent(username){
this.username = username
this.hello = function(){
alert(this.username)
}
}
function Child(username,password){
Parent.apply(this,new Array(username))
this.password = password
this.world = function(){
alert(this.password)
}
}
var parent = new Parent("zhangsan")
var child = new Child("lisi","123456")
parent.hello()
child.hello()
child.world()
4、继承的第四种方式：原型链方式，即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child，从而实现了继承
function Person(){
}
Person.prototype.hello = "hello"
Person.prototype.sayHello = function(){
alert(this.hello)
}
function Child(){
}
Child.prototype = new Person()//这行的作用是：将Parent中将所有通过prototype追加的属性和方法都追加到Child，从而实现了继承
Child.prototype.world = "world"
Child.prototype.sayWorld = function(){
alert(this.world)
}
var c = new Child()
c.sayHello()
c.sayWorld()
5、继承的第五种方式：混合方式
混合了call方式、原型链方式
function Parent(hello){
this.hello = hello
}
Parent.prototype.sayHello = function(){
alert(this.hello)
}
function Child(hello,world){
Parent.call(this,hello)//将父类的属性继承过来
this.world = world//新增一些属性
}
Child.prototype = new Parent()//将父类的方法继承过来
Child.prototype.sayWorld = function(){//新增一些方法
alert(this.world)
}
var c = new Child("zhangsan","lisi")
c.sayHello()
c.sayWorld()
数据如果不是定死的就用ajax如果是定死的就用数据
这是我写的一个例子，数据是定死的，我这里只有两个下拉列表，三个的其实道理一样
<html>
<head>
<meta http-equiv=content-type content="text/htmlcharset=GBK">
<script language="JavaScript" type="text/javascript">
<!--
// 初始时定义相关数组
var provinces = ["吉林", "辽宁", "黑龙江", "江苏", "山东"]
var jiLin = ["长春", "吉林", "白城", "白山"]
var liaoNing = ["沈阳", "大连", "鞍山"]
var heiLongJiang = ["哈尔滨", "佳木斯", "牡丹江", "齐齐哈尔"]
var jiangSu = ["南京", "苏州", "无锡", "常州", "徐州"]
var shanDong = ["济南", "烟台", "青岛", "威海"]
var allProvinces = ["", jiLin, liaoNing, heiLongJiang, jiangSu, shanDong]
// 取得用户选择的省
function selectProvince(obj){
var province = obj.value
if(parseInt(province) >= allProvinces.length)
return
addCity(allProvinces[province])
}
// 向城市复选框中添加数据
function addCity(province){
var citys = document.all.city
citys.options.length = 1
document.all.picture.src = "images\\城市.jpg"
if(province == "") return
for(var i=0i<province.lengthi++){
citys.add(new Option(province[i], i+1, false, false))
}
}
// 选择城市列出介绍
function selectCity(obj){
var city = obj.value
document.all.picture.src = "images\\" + obj.options[parseInt(city)].text + ".jpg"
}
-->
</script>
</head>
<body>
<!--province-->
<select id="sheng" onchange="selectProvince(this)">
<option value="0" selected = true>选择省</option>
</select>
<!--city-->
<select id="city" onchange="selectCity(this)">
<option value="0" selected = true>城市</option>
</select>
<br>
<!--picture-->
<table border=15 style=border-style:ridge width=360 height=300>
<tr valign=top>
<td>
<img src="images\\城市.jpg" id="picture" name="picture" width=360 height=300/>
</td>
</tr>
</table>
<script language="JavaScript" type="text/javascript">
<!--
// 初始化省
var obj = document.all.sheng
for(i=0 i<5 i++){
obj.add(new Option( provinces[i], i + 1, false, false))
}
-->
</script>
</body>
</html>
