JS面向对象实例、高级

最新推荐文章于 2024-07-26 19:23:56 发布

weihongda666

最新推荐文章于 2024-07-26 19:23:56 发布

阅读量1.8k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/weihongda666/article/details/79020757

版权

本文探讨了JavaScript的面向对象编程实例，包括如何将选项卡实现从面向过程转化为面向对象，强调了this的使用。进一步讲解了JSON的面向对象特性，适合单体对象和命名空间。接着阐述了继承的概念，通过call和for循环实现属性和原型继承。还讨论了数组引用的问题及解决方案，以及面向对象拖拽的继承实现，涉及如何限制拖拽范围。最后提到了JS的系统对象分类：宿主、本地和内置对象。

摘要由CSDN通过智能技术生成

· 选项卡用面向过程1

window.οnlοad=function ()
{
	var oDiv = document.getElementById('div1');
	var aDiv = oDiv.getElementsByTagName('div');
	var aBtn = oDiv.getElementsByTagName('input');

	for (var i=0;i<aBtn.length;i++)
	{
		aBtn[i].index=i;
		aBtn[i].οnclick=function ()
		{				
			for(var i=0;i<aBtn.length;i++)
			{
				aBtn[i].className='';
				aDiv[i].style.display='';
			}
			this.className='active';
			aDiv[this.index].style.display='block';						
		};
	}
};

· 选项卡用面向对象写2

var aBtn=null;  //全局变量
var aDiv=null;

window.οnlοad=function ()
{
	var oDiv = document.getElementById('div1');
	aDiv = oDiv.getElementsByTagName('div');     //去掉 var
	aBtn = oDiv.getElementsByTagName('input');

	for (var i=0;i<aBtn.length;i++)
	{
		aBtn[i].index=i;
		aBtn[i].οnclick=fnClick;
		
	}
};

function fnClick()
{					
	for(var i=0;i<aBtn.length;i++)
	{
		aBtn[i].className='';
		aDiv[i].style.display='';
	}
	this.className='active';
	aDiv[this.index].style.display='block';						
};

· 选项卡用面向对象写3