体会面向对象过程与面向对象的编程思想

体会面向对象过程与面向对象的编程思想
加粗样式

<script>
	// 初级面向对象思想
	document.getElementById('btn').onclick=function(){
		document.getElementById("dv").style.backgroundColor="yellow";
	};

	// 高级面向对象思想
	// 按钮是一个对象，div是一个对象，颜色是属性
	//构造函数
	function ChangeColor(btnId,dvId,color){
		this.btnObj=document.getElementById(btnId);//按钮对象
		this.dvObj=document.getElementById(dvId);//div对象
		this.color=color;
	}
	//数据共享方式来改变背景颜色
	ChangeColor.prototype.init=function(){
		console.log(this);//this就是当前对象那个-----就是实例对象--就是S1
		var that = this;
		this.btnObj.onclick=function(){
			that.dvObj.style.backgroundColor=that.color;
		}
	};
	//实例化对象
	var s1 = new ChangeColor("btn","dv","yellow");
	s1.init();
</script>