麻烦老师看看理解是否正确 谢谢

来源: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

同学你好,理解是正确的,祝学习愉快!

0

0 学习 · 15276 问题

查看课程