面向对象 案例

• this的指向性问题

//类1  定义变量that存储this
    class Bull{
        constructor(){
            this.ele = document.querySelector('button');
            this.bindEvent();
        }
        bindEvent(){
            var that = this; //定义that存储this，此处this指向实例对象
            that.ele.onclick = function(){
            //事件对象内部，this指向点击的元素
                that.creatDiv();
            }
        }
        creatDiv(){
            //创建div
            var oDiv = document.createElement('div');
            oDiv.style.width = '200px';
            oDiv.style.height = '200px';
            oDiv.style.backgroundColor = 'yellow';

            oDiv.innerHTML ='你好';

            document.body.appendChild(oDiv);
        }
    }

    var b1 = new Bull();

//类2   使用箭头函数解决this指向改变的问题
    class Bull{
        constructor(){
            this.ele = document.querySelector('button');
            this.bindEvent();
        }
        bindEvent(){
            //写成箭头函数的形式，就不存在this指向改变，
            // 箭头函数内部this指向是跟随上下文
            this.ele.onclick = ()=>{
            // 此处this指向等同于外部的this
                this.creatDiv();
            }
        }
        creatDiv(){
            //创建div
            console.log(this);
            
            var oDiv = document.createElement('div');
            oDiv.style.width = '200px';
            oDiv.style.height = '200px';
            oDiv.style.backgroundColor = 'yellow';

            oDiv.innerHTML ='你好';

            document.body.appendChild(oDiv);
        }
    }

    var b1 = new Bull();

//类3  点击事件后跟函数名，直接调用函数
    class Bull{
        constructor(){
            this.ele = document.querySelector('button');
            this.bindEvent();
        }
        bindEvent(){
            //直接让点击事件等于创建div函数，函数内部的this指向点击元素
            this.ele.onclick = this.creatDiv;             
        }
        creatDiv(){
            //创建div
            console.log(this);  //此时this指向点击的按钮,
            
            var oDiv = document.createElement('div');
            oDiv.style.width = '200px';
            oDiv.style.height = '200px';
            oDiv.style.backgroundColor = 'yellow';

            oDiv.innerHTML ='你好';

            document.body.appendChild(oDiv);
        }
    }

    var b1 = new Bull();

经典案例

//功能分析   ---> 使用类实现轮播图效果
    // 点击小点，小点变色，排他，图片切换
    // 鼠标滑入 箭头显示 停止自动播放
    // 鼠标滑出 箭头隐藏  继续自动播放
    // 页面加载自动轮播
    // 点击左右箭头 图片切换

    class LunBo {
        //用类实现轮播图
        constructor() {
            //获取元素
            this.oCen = document.querySelector('.banner_cen');
            this.oUl = this.oCen.children[0];
            this.oLi = this.oUl.children;
            this.oDian = this.oCen.children[1];
            this.oP = this.oDian.children;
            this.oLt = this.oCen.children[2];
            this.oRt = this.oCen.children[3];
            this.index = 0;  //记录当前图片下标

            this.bindEvent()  //此处调用绑定事件的方法
            this.timer = null;
            this.autoPlay();
        }
        bindEvent() {
            //次方法用来封装所有绑定事件
            var that = this; //  that 指向实例对象  时间里this指向事件源
            that.oDian.onclick = function (e) {
                // 点击小点，小点变色，图片切换
                //此时，this指向点击的小点
                var ev = e || window.event;
                var t = ev.target || ev.srcElement;
                if (t.nodeName.toLowerCase() == 'p') {
                    //点击到小点时,t就是点击的小点
                    that.changeColor(t);

                }
                t.className = 'fir';
                sport(that.oUl, -650 * t.getAttribute('value'));

            }

            // 点击左右箭头，图片切换
            that.oLt.onclick = function () {
                //点击左箭头
                that.moveLeft(); //调用对应的左箭头函数
            }
            that.oRt.onclick = function(){
                //点击右箭头
                that.moveRight();                
            }

            //鼠标移入，停止自动播放
            that.oCen.onmouseover = function(){
                clearInterval(that.timer);
            }
            //鼠标移出，继续自动播放
            that.oCen.onmouseout = function(){
                that.autoPlay()
            }
        }

        changeColor(obj) {
            //改变当前点的背景色
            // obj就是传过来的this
            for (var j = 0; j < this.oP.length; j++) {
                this.oP[j].className = '';
            }
            obj.className = 'fir';
        }

        moveLeft() {
            //左箭头函数
            if (this.index <= 0) {
                this.index = 5;
            }
            this.index--;
            sport(this.oUl, -650 * this.index);
            this.changeColor(this.oP[this.index]);
        }
        moveRight(){
            //右箭头函数
            if(this.index>=4){
                this.index =-1;
            }
            this.index ++;
            sport(this.oUl,-650*this.index);
            this.changeColor(this.oP[this.index]);
        }
        autoPlay(){
            this.timer = setInterval(()=>{
                this.moveRight();
            },5000)
        }
    }

    var l1 = new LunBo() //实例化一个对象