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

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

<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>