<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
var arr1 = new Array(12, 22, 23, 454, 34);
var arr2 = new Array(23, 234, 23);
Array.prototype.sum = function () { //class 原型
//arr1.sum=function (){ //行间样式 给对象加东西
var result = 0;
for (var i = 0; i < this.length; i++) {
result +=this[i];
}
return result;
};
alert(arr1.sum());
alert(arr2.sum());
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html> \混合的构造函数/原型方式
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
function createPerson(name, qq) { \构造函数
this.name = name;
this.qq = qq;
}
//createPerson.prototype 是原型
createPerson.prototype.showName = function () {
alert("我的名字：" + this.name);
};
createPerson.prototype.showQQ = function () {
alert("我的QQ" + this.qq)
}；
var obj = new createPerson("bule", "234234234");
var obj2 = new createPerson("234", "23423453");
obj.showName();
obj.showQQ();
obj2.showName();
obj2.showQQ();
//alert(obj);
alert(obj.showName == obj2.showName);
</script>
</head>
<body>
</body>
</html>
用构造函数加属性
用原型加方法
-------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
#div1 input {background:white;}
#div1 input.active {background:yellow;}
#div1 div {200px; height:200px; background:#ccc; display:none;}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var aBtn = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div');
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].index = i;
aBtn[i].onclick = function () {
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].className = '';
aDiv[i].style.display = 'none';
}
this.className = 'active';
aDiv[this.index].style.display = 'block';
};
}
};
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="aaa" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<div style="display:block;">aaa</div>
<div>sdfsdf</div>
<div>sdfsdfsdf</div>
</div>
</body>
</html>
（上面）面向过程 改 面向对象
window.onload 构造函数
初始化整个程序 初始化整个对象
变量 属性
函数 方法
函数没有嵌套
可以有全局变量
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
#div1 input {
background: white;
}
#div1 input.active {
background: yellow;
}
#div1 div {
200px;
height: 200px;
background: #ccc;
display: none;
}
</style>
<script>
//var index = null;
window.onload = function () {
new TabSwitch('div1');
};
function TabSwitch(id) {
var _this = this;
var oDiv = document.getElementById(id);
this.aBtn = oDiv.getElementsByTagName('input');
this.aDiv = oDiv.getElementsByTagName('div');
for (var i = 0; i < this.aBtn.length; i++) {
this.aBtn[i].index = i;
this.aBtn[i].onclick = function () {
_this.fnClick(this);
};
}
};
TabSwitch.prototype.fnClick = function (oBtn) {
for (var i = 0; i < this.aBtn.length; i++) {
this.aBtn[i].className = '';
this.aDiv[i].style.display = 'none';
}
oBtn.className = 'active';
this.aDiv[oBtn.index].style.display = 'block';
};
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="aaa" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<div style="display:block;">aaa</div>
<div>sdfsdf</div>
<div>sdfsdfsdf</div>
</div>
</body>
</html>