<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>面向对象选项卡案例</title>
<style>
#div1 div{width: 200px;height: 200px;border: 1px solid #333;display: none}
.active{background: #f00}
</style>
</head>
<body>
<div id="div1">
<input type="button" class="active" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block;">1111</div>
<div>2222</div>
<div>3333</div>
</div>
<script>
var oParent=null;
var oIpt=null;
var oDiv=null;
window.onload=function(){
var oParent=document.getElementById("div1");
var oIpt=oParent.getElementsByTagName("input");
var oDiv=oParent.getElementsByTagName("div");
for(var i=0;i<oIpt.length;i++){
oIpt[i].index=i;
oIpt[i].onclick= change;
}
for(var i=0;i<oIpt.length;i++){
oIpt[i].className='';
oDiv[i].style.display='none';
}
this.className='active';
oDiv[this.index].style.display='block';
};
</script>
</body>
</html>
首先将嵌套的函数拿到window.onload外面，不能有函数嵌套，可以有全局变量
<script>
window.onload=function(){
var oParent=document.getElementById("div1");
var oIpt=oParent.getElementsByTagName("input");
var oDiv=oParent.getElementsByTagName("div");
init()
};
function init(){
for(var i=0;i<oIpt.length;i++){
oIpt[i].index=i;
oIpt[i].onclick= change;
}
};
function change(){
for(var i=0;i<oIpt.length;i++){
oIpt[i].className='';
oDiv[i].style.display='none';
}
this.className='active';
oDiv[this.index].style.display='block';
}
</script>
将全局的变量变为对象的属性，全局的函数变为对象的方法；将window.onload里的代码提取到一个构造函数里面，在window.onload里创建对象即可
<script>
window.onload=function(){
var t1=new Tab();
t1.init()
};
function Tab(){
this.oParent=document.getElementById("div1");
this.oIpt=this.oParent.getElementsByTagName("input");
this.oDiv=this.oParent.getElementsByTagName("div");
};
Tab.prototype.init=function(){
var _this=this;
for(var i=0;i<this.oIpt.length;i++){
this.oIpt[i].index=i;
// this.oIpt[i].onclick= this.change;
this.oIpt[i].onclick= function(){
//this
_this.change(this)
};
}
};
Tab.prototype.change=function(obj){
for(var i=0;i<this.oIpt.length;i++){
this.oIpt[i].className='';
this.oDiv[i].style.display='none';
}
obj.className='active';//obj指的是被点击的元素，并不是实例化的对象（this），所以此处不能用this
this.oDiv[obj.index].style.display='block';
}
</script>
js静态方法和实例方法的区别：
静态方法，属于类的方法，即类可以直接调用的方法。为类所有实例化对象所共用（但不能用实例对象调用），所以静态成员只在内存中占一块区域；
实例方法，属于实例化类后对象的方法，即实例对象调用的方法。每创建一个类的实例，都会在内存中为非静态成员分配一块存储；
静态方法在一启动时就实例化了，因而静态内存是连续的，且静态内存是有限制的；而非静态方法是在程序运行中生成内存的，申请的是离散的空间。
function A(){
}
A.staticMethof = function(){
alert('静态方法');
}
A.prototype.instaceMethod = function(){
alert('实例方法');
}
A.staticMethof(); //类A直接调用
var instace = new A();
instace.instaceMethod();//A的实例对象instace调用