老师帮我看一下哪里有问题

问题描述：

图片没有显示出来，另外我对绑定监听函数为什么要备份上下文不太明白，还请老师讲解

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>红绿灯小案例</title>
    <style>
        #box img {
            width: 80px;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        function TrafficLight() {
            this.color = 1;
            this.init();
            this.bindEvent();
        }

        TrafficLight.prototype.init = function () {
            this.dom = document.createElement('img');
            this.dom.scr = 'images/' + this.color + '.jpg';
            box.appendChild(this.dom);
        };

        TrafficLight.prototype.bindEvent = function () {
            var self = this;
            this.dom.onclick = function () {
                self.changeColor();
            };
        };

        TrafficLight.prototype.changeColor = function () {
            this.color++;
            if (this.color == 4) {
                this.color = 1;
            }

            this.dom.src = 'images/' + this.color + '.jpg';
        };

        var box = document.getElementById('box');

        var count = 10;
        while (count--) {
            new TrafficLight();
        }
    </script>
</body>

</html>

一心励志当码农 2021-05-31

源自：面向对象 6-1 上升到面向对象-红绿灯小案例

收起

2回答

好帮手慕星星 2021-05-31 11:57:17

同学你好，很抱歉老师漏掉了一个问题。

一般事件中的this指向绑定事件的元素，可以输出看看

输出的是图片

而changeColor方法是TrafficLight原型上的，如果用this（指向图片）访问不到。所以提前保存正确的this赋值给self变量，然后在事件中用self来调用changeColor方法。

自己再理解下，祝学习愉快！

收起回答

提问者一心励志当码农 #1

老师，那self就是TrafficLight类的实例，也就是一个对象，通过self的__proto__属性来访问TrafficLight原型上的changeColor方法对吧，而this（指向图片）这个是无法访问到这个changeColor方法的，是这个意思吧

2021-05-31 15:08:19
好帮手慕星星回复提问者一心励志当码农 #2

是的，理解没问题。

2021-05-31 15:53:20