javascript——面向对象（2、面向过程改写成面向对象）

最新推荐文章于 2022-11-05 16:50:09 发布

VIP文章莫非C

最新推荐文章于 2022-11-05 16:50:09 发布

阅读量350

点赞数

分类专栏：面向对象 JS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43340295/article/details/107251298

版权

如何将面向过程的程序，改写成面向对象的程序

原则：不能有函数套函数，但可以有全局变量
过程：
1、onload -> 构造函数
2、全局变量 -> 属性
3、函数 -> 方法
4、改错：this、事件、闭包、传参

示例：选项卡（面向过程）

//js
<script>
window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	var aBtn=oDiv.getElementsByTagName('input');
	var aDiv=oDiv.getElementsByTagName('div');
	var i=0;
	
	for(i=0;i<aBtn.length;i++)
	{
		aBtn[i].index=i;
		aBtn[i].onclick=function ()
		{
			for(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>

//html
<body>
<div id="div1">
	<input class="active" type

最低0.47元/天解锁文章

优惠劵

莫非C

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript——面向对象（2、面向过程改写成面向对象）

如何将面向过程的程序，改写成面向对象的程序原则：不能有函数套函数，但可以有全局变量过程：1、onload -> 构造函数2、全局变量 -> 属性3、函数 -> 方法4、改错：this、事件、闭包、传参示例：选项卡（面向过程）//js<script>window.onload=function (){ var oDiv=document.getElementById('div1'); var aBtn=oDiv.getElementsBy
复制链接

扫一扫