面向对象编程-红绿灯

1、利用原生的JavaScript 实现

var honglvdeng = document.getElementsByClassName("honglvdeng")[0];
    //console.log(honglvdeng)
    var inx = 0;
    honglvdeng.onclick = function () {
        inx++;
        inx = inx > 2 ? 0 : inx;
        this.style.backgroundPosition = (inx * -155) + "px 0";
    }

2、利用面向对象思想 实现

给构造器绑定一个信号量属性，然后每一个实例就都拥有了这个信号量，而且是单独的

如果需要100个红绿灯，不用手动写100个div标签，而是要将div变为一个类

function Honglvdeng() {
        //信号量
        this.inx = 0;
        //初始化dom
        this.init();
        //绑定事件
        this.bindEvent()
    }
    Honglvdeng.prototype.init = function () {
        
        this.dom = document.createElement("div");
        this.dom.className = "honglvdeng";
        document.getElementById("box").appendChild(this.dom);
       
    }
    Honglvdeng.prototype.bindEvent = function () {
        console.log(this);
        //备份this
        var self = this;
        this.dom.onclick = function () {
            self.inx ++ ;
            //console.log(self.inx)
            self.inx = self.inx > 2 ? 0 : self.inx;
           // console.log(self.inx)
            this.style.backgroundPosition = (self.inx * -155) + "px 0";
        }
    }

   var num = 10;
   while (num--) {
       new Honglvdeng;
   }

面向对象编程的信号量思维其实就是将信号量放到实例身上，然后每个人有自己独立的信号量，然后点击切换红绿灯的时候改变的都是自己的信号量