下面對面向物件寫個小案例（紅綠燈）

上面是原圖 用來來實現點選圖片，紅綠燈的顏色改變，控制背景圖片的定位來改變

點選一下

就是要完成上面的效果

如果只要實現一個

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生成的物件的值是一樣的記憶體堆位置是不一樣的，所以每一個物件中的屬性是互不相關的自己管理,所以達到了我們需要的效果;
			//什麼時候用面向物件:當出現多個結構相同,行為一樣的時候,用面向物件