构造函数与原型链和面向对象的学习(三)

下面对面向对象写个小案例（红绿灯）

上面是原图 用来来实现点击图片，红绿灯的颜色改变，控制背景图片的定位来改变

点击一下

就是要完成上面的效果

如果只要实现一个

CSS
div{
    width: 335px; height: 890px;
	margin-left: 20px;
	float: left;
	background: url(timg.jpg);
	border: 1px solid saddlebrown;
	background-position: -335px 0;
		}
js
var deng = document.querySelector("#deng"); //找到deng的位置
			var color = 0; //判断颜色
			deng.onclick = function(){
				color++;
				if(color > 2){
					color = 0;
				}
				this.style.backgroundPosition = -335 * color + "px 0";
			}

//当用这样的方法写多个红绿灯就要多个deng的DIV 和多的color来控制不同DIV不同的颜色,如果只有个color那么就会出现多个div控制一套颜色（color)的改变,而不可以控制属于自己的那套颜色的改变
//所以要写多个color,那么为了简写代码可以用面向对象的写法
 //原理从color是全局变量,改我用面向对象的写法吧color变成对象的属性，这样就有属于自己的color而不是公用（也就是为什么构造函数中是什么值（color）相同但他们却不全等（堆中内存地址）的用法）

			function Hld() {
				this.dom = document.createElement("div"); //创建一个DIV是我构造函数生成的对象中的dom属性
				document.body.appendChild(this.dom); //上树 吧DIV放到doby中
				this.color = 0;
				var that = this; //因为下面事件函数的this是this.dom 而我们要在事件函数中要改变的是that所代表的this的值为new出来的对象中的color值的改变
				this.dom.onclick = function(){
					that.color++;
					if(that.color > 2){
						that.color = 0;
					}
					that.dom.style.backgroundPosition = -335*that.color +"px 0";
				}
				
			} 
			var H = new Hld();
			var H2 = new Hld();
			var H3 = new Hld();
			//这样做出来的就可以自己控制自己的一套颜色的改变因为:构造函数new生成的对象的值是一样的内存堆位置是不一样的，所以每一个对象中的属性是互不相关的自己管理,所以达到了我们需要的效果;
			//什么时候用面向对象:当出现多个结构相同,行为一样的时候,用面向对象