js对象和继承的应用和问题解决

最新推荐文章于 2022-10-16 18:27:09 发布

u013464954

最新推荐文章于 2022-10-16 18:27:09 发布

阅读量434

点赞数

文章标签： javascript 对象继承事件委托 this

本文链接：https://blog.csdn.net/u013464954/article/details/52886421

版权

这两天学习对象，对对象有了一些更深入的了解，下面就用创建对象的方式做一个小案例，在网上查看图片，一般可以查看大图，在这里就来做一下这个例子。

首先是html代码，在这里我要实现点击图片然后查看大图，点击旁边小按钮可以关闭：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/js2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.οnlοad=function (){
				new Show2('box','show','b_img','delete');
			}
		</script>
	</head>
	<body>
		<div id="box">
			<img src="pic/1.jpg"/>
			<img src="pic/2.jpg"/>
			<img src="pic/3.jpg"/>
			<img src="pic/4.jpg"/>
			<img src="pic/5.jpg"/>
		</div>
		<div id="show">
			<span id="delete"></span>
		</div>
		<img src="pic/1.jpg" id="b_img"/>
	</body>
</html>

css代码如下：

* { margin: 0; padding: 0; }

 /*解决内容比较少没有滚动条，随着内容增加，出现滚动条页面跳动的问题*/
/*overflow-y: scroll;*//*这个做法会使浏览器右侧出现灰色的丑丑的滚动栏*/
/*下面两种方式有兼容性问题，出现滚动条时设置左边跟滚动条等宽的距离*/
body { padding-left: calc(100vw - 100%); /*margin-left: calc(100vw - 100%);*/}

#box { width: 1100px; margin: 0 auto; }

#box img { display: block; float: left; width: 200px; margin: 10px; }

#show { width: 100%; height: 100%; background-color: #000; opacity: 0.5; position: fixed; display: none; }

#delete { position: absolute; right: 30px; top: 30px; border-radius: 50%; width: 50px; height: 50px; background-color: #fff; cursor: pointer; }

#b_img { position: absolute; display: none; }

先来一个创建对象，实现查看大图，实现关闭隐藏：

function Show(id1,id2,id3,id4) {//构造函数
	//构造函数里面的所有属性和方法都属于创建的当前对象，用this指代当前对象
	var _this = this;
	this.oBox = document.getElementById(id1);
	this.oShow = document.getElementById(id2);
	this.bImg = document.getElementById(id3);
	this.oQuit = document.getElementById(id4);
	this.oBox.οnclick=function (ev){
	//函数调用要用指代新创建的对象那个this，如果直接用this，指的是this.oBox
	//传入参数外面要有一个匿名函数
		_this.blockfn(ev);
	};
	this.oQuit.οnclick=function (){
	//在测试中发现直接把函数名赋给onclick会有问题，这是函数里面的指代问题，赋值赋给onclick是函数地址
	/*函数里面有2个this，当你直接赋函数名的时候，相当于直接在onclick后面添加了匿名的函数体
	 这样this指的是this.oQuit，那为什么把它写到匿名函数体里面就行呢？这就是相当于对象调用方法，
	 当前构造的对象_this调用了对象里的方法nonefn()，在方法里面的this肯定指的是当前调用它的对象，也就是_this*/
		_this.nonefn();
	}
}
/*当我点击小图的时候，我把小图的src给大图的src，然后显示出大图，这里用事件委托的方式去做*/
Show.prototype.blockfn = function (ev){
	var iEvent = ev || event;
	var srcE = iEvent.srcElement || iEvent.target;
	if(srcE.nodeName.toLowerCase() == 'img') {
		this.oShow.style.display = 'block';
		this.bImg.src = srcE.src;
		this.bImg.style.display = 'block';
		this.bImg.style.left = (document.documentElement.clientWidth - this.bImg.offsetWidth) / 2 + 'px';
		this.bImg.style.top = (document.documentElement.clientHeight - this.bImg.offsetHeight) / 2 + 'px';
	}
}
/*大图隐藏*/
Show.prototype.nonefn = function() {
	this.oShow.style.display = 'none';
	this.bImg.style.display = 'none';
}

后面我想要加多一点功能，就是点击关闭的那个按钮要实现鼠标移入移出变颜色的效果，所以用了对象继承的方式

function Show2(){
	var _this=this;
	Show.apply(this,arguments);
//对象继承属性，arguments表示传入的参数数组，也可以用call，用call方法不能用arguments传参的方式
	this.oQuit.οnmοuseοver=function (){
		_this.color1();
	}
	this.oQuit.οnmοuseοut=function (){
		_this.color2();
	}
}
/******************原型方法的继承***************/
/*下面一种是引用类型的继承，实际它们指代的是同一个对象原型，当一个发生改变，另一个也会改变；*/
//Show2.prototype=Show.prototype;
/*下面的方式就是把Show里面的原型方法体一个一个放入Show2原型中，而不是直接赋给Show2地址值，
 Show、Show2指向的原型不是同一个了*/
for (var i in Show.prototype) {
	Show2.prototype[i]=Show.prototype[i];
}
//但是这个有个问题，alert(new Show2('box','show','b_img','delete') instanceof Show);为false
//instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上
//Show2.prototype=new Show();//原型链的方式继承，直接新创建一个实例赋给Show2的原型，这种方式测试会出现问题
Show2.prototype.color1=function (){
	this.oQuit.style.backgroundColor='#f00';
}
Show2.prototype.color2=function (){
	this.oQuit.style.backgroundColor='#fff';
}