javascript基础之面向对象（中）

最新推荐文章于 2022-08-09 15:00:06 发布

hf549072646

最新推荐文章于 2022-08-09 15:00:06 发布

阅读量273

点赞数

分类专栏： javascript基础

本文链接：https://blog.csdn.net/hf549072646/article/details/49965345

版权

javascript基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这里做一个选项卡切换，先用面向流程的方法实现，再改装成面向对象的形式。

看如下代码：

代码块1：
<style>
	#btn button{background:#fff;}
	#btn button.active{background:gold;}
	.content{background:#ccc;width:300px;height:300px;display:none;}
</style>
<script>
	window.οnlοad=function(){
		var btn = document.querySelectorAll('button');
		var con = document.querySelectorAll('.content');
		for(var i=0;i < btn.length;i++ ){
			btn[i].index = i;
			btn[i].οnclick=function(){
				for(var j=0;j<btn.length;j++){
					btn[j].className='';
					con[j].style.display='none';
				}
				this.className='active';
				con[this.index].style.display='block';
			};
		}
	}
</script>
<body>
	<div id="btn">
		<button class="active">按钮1</button>
		<button>按钮2</button>
		<button>按钮3</button>
	</div>
	<div>
		<div style="display:block" class="content">这是按钮1里面的内容</div>
		<div class="content">这是按钮2里面的内容</div>
		<div class="content">这是按钮3里面的内容</div>
	</div>
</body>
简单解释一下，通过点击button按钮来让下边的div内容块切换。window.onload方法大家都知道，外层for循环语句用来给按钮绑定点击事件，内部for循环语句就是清除按钮的class和隐藏底部的内容快。很简单明了。

那么现在开始把它改装成面向对象的形式，怎么做呢？

代码块2：
<script>
	function TabClick(TagName,className){
		var _this = this;						//this代表TabClick对象
		this.btn = document.querySelectorAll(TagName);			//TabClick属性
		this.con = document.querySelectorAll("."+className);		//TabClick属性
		for(var i=0;i < this.btn.length;i++ ){				//this代表TabClick对象
			this.btn[i].index = i;
			this.btn[i].οnclick= function(){
				_this.btnClick(this);				//this代表被点击的button对象
			};
		}
	}
	TabClick.prototype.btnClick=function(oBtn){				//Btn代表被点击的button对象
		for(var j=0;j < this.btn.length;j++){				//this代表TabClick对象
			this.btn[j].className='';
			this.con[j].style.display='none';
		}
		oBtn.className='active';
		this.con[oBtn.index].style.display='block';			//his代表TabClick对象
	}
	window.οnlοad=function(){
		new TabClick('button','content');
	}
</script>
构造一个对象TabClick，它的属性有2个：btn和con，方法有btnClick()通过prototype原型申明。这段代码有特别多的this，这也是面向对象里面见的最多的，我在后边都标注了每个this代表什么。
面向对象对象整体结构性更好，当然选项卡切换这种简单的功能用面向对象反而麻烦，面向对象在简单的程序里提现不出什么来，在大型项目才会有用武之地，当然先简单的培养这种思路。做项目的时候，多考虑如果用面向对象怎么写，慢慢练习，循序渐进啦。

下篇会讲述一下闭包的概念~~~~~~~~~~