面向对象简单实例

<!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调用