麻烦老师看看理解是否正确 谢谢
来源:6-1 上升到面向对象-红绿灯小案例
dww1
2022-04-04 21:37:03
TrafficLight.prototype.init=function(){ //给TrafficLight.prototype原型添加函数方法 实例是可以访问并且调用的 //创建自己的dom this.dom=document.createElement('img'); //孤儿节点 //设置img的src属性 this.dom.src='images/'+this.color+'.jpg'; box.appendChild(this.dom);//上树 };
初始化方法 init() 每一次的new 都会创建一个 属性为img 的this dom 的DOM元素 颜色为1 ,且一一上树 在构造函数TrafficLight中 this.init(); 是调用init方法 this指的是new出来的实例,在
TrafficLight.prototype 原型上只是添加的init方法
TrafficLight.prototype.bindEvent=function(){ //备份上下文 ,这里的this指的是js的实例 var self=this; //当自己的dom被点击的时候 调用自己的changeColor方法 绑定事件的this是绑定事件的元素 不再指实例 tl this.dom.onclick=function(){ self.changeColor(); }; }
绑定监听 同样给TrafficLight.prototype 原型上只是添加的bindEvent方法
备份上下文 是因为 这里的onclik事件处理方法的绑定事件的元素是this.dom 是img 就是初始化所添加到页面的元素,而原型上的this是指实例,如果 不备份上下文 就会导致系统报错,原型上没有changeColor方法 可以被调用
1)尝试着往原型上添加onlcik事件监听 但是发现new之后的每一张图都是图2 且点击切换不了图片
是因为 每次new都会执行onclik事件 导致所有的图片都会是图2,切换不了是因为没有给this.dom
添加事件onclik吗
还有老师说的有100个js对象 那么{color:1,dom : img} 都是指向不同的内存地址的吗
TrafficLight.prototype.onlcik=function(){ this.changeColor(); }
//改变颜色 TrafficLight.prototype.changeColor=function(){ //改变自己的color属性, 自己管理自己不干扰别的红绿灯 this.color++; if(this.color==4){ this.color=1; } //光color属性变化没有用 还要更改自己dom的src属性 this.dom.src='images/'+this.color+'.jpg'; }
1回答
樱桃小胖子
2022-04-06
同学你好,理解是正确的,祝学习愉快!
相似问题