<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
//点击更改div的颜色
//面向过程
/* document.getElementById(“btn”).onclick=function () {
document.getElementById(“dv”).style.backgroundColor=“blue”;
}*/
//面向对象
//操作谁:按钮 , div, 颜色
/* function Style(btnId,dv,color) {
this.btnId=document.getElementById(btnId);//按钮对象
this.dvId=document.getElementById(dv);//div对象
this.color=color; //颜色属性
}
//在原型中添加方法
Style.prototype.init=function () {
//点击改变颜色
console.log(this);//实例对象
//函数嵌套时,this指向会发生变化
var that=this;
this.btnId.onclick=function () {
console.log(this);//指向按钮
//that.dvId.style.backgroundColor="red";
that.dvId.style.backgroundColor=that.color;
}
}
//实例化对象
var change=new Style(“btn”,“dv”,“yellow”);
change.init();
console.log(change.color);*/
//需求按下键盘获取文本框的value的值
function Get(txt) {
this.txt=document.getElementById(txt);
}
Get.prototype.init=function () {
var that=this;
console.dir(this);
this.txt.onkeydown=function () {
console.log(that.txt.value);
}
}
var g=new Get(“text”);
g.init();
console.dir(g);
console.dir(Get);
注意:函数嵌套时,this指向会发生变化, var that=this;这里的指向是对象,而在事件里的this指向是按钮元素。从上面可以看出面向过程的代码少些,面向对象思想的代码多些;面向过程是注重过程,面向对象思想是注重结果的。