JS高级之体会面向过程和面向对象的思想

div {
width: 200px;
height: 200px;
background-color: black;
}

//先通过面向过程来一波 // document.getElementById("btn").οnclick=function (){document.getElementById("box").style.backgroundColor="aqua"}; //面向对象 //先分析一波 要两个对象 按钮 和 div 要一个属性 bgcolor function ChangeStyle(btnId, divId, color) { this.btnId = document.getElementById(btnId); this.divId = document.getElementById(divId); this.color = color; } ChangeStyle.prototype.changeColor=function(){ console.log(this); var that=this; //此时的this指的是 cS 这一整个大实例对象 this.btnId.οnclick=function(){ that.divId.style.backgroundColor = that.color; } } var cS=new ChangeStyle("btn","box","red"); cS.changeColor();