javascript中面向对象的编程思想

我们所说的面向对象其实是一种编程思想

        传统的面向过程，在我们刚开始接触的时候我们会觉得面向过程开发十分的方便简洁，因为面向过程是将一个东西分成很多过程，我们能一眼看出来哪步是哪步，看着很直观方便我们理解，但是随之事物的越来越复杂，我们需要添加的功能也越来越多，如果我们继续用面向过程的开发思想，我们就会发现我们的代码变得越来越符复杂，越来越冗长，并且非常容易出错。因此，就有了我们现在学的面向对象的编程思想。
        面向对象的编程思想是尽可能的模拟人的思维，通过这种方式让开发的软件更符合人们的认知，也方便人们的使用。

目前我所学到的面向对象的编程思想：

        就是通过构造函数构造一个实例化对象，然后通过调用其中的方法和属性来实现我们的目的。
        面向对象的优点：(目前本人就知道这么多)
        (1)对象中,可以定义并且存储多个数据单元以及所有JavaScript支持的数据类型
        (2)对象中,调用具体数据很方便 调用数据时,不用考虑数据的顺序 只要键名/属性 输入正确就可以了
        (3)对象中,可以定义函数,还可以通过函数的this,方便的调用对象本身的数据 调用对象的数据,不用管对象名称 是什么,只要通过this,就可以指向这个对象,
        (4)高内聚,低耦合,可反复调用

举个用面向对象编程思想的例子（轮播图）

// 获取总的父级的标签对象,oDiv
const oDiv = document.querySelector('div');

// 面向对象,封装class类
class SetLoop{
			// 定义数据参数
            constructor(ele){
            	// 存储参数
                this.ele = ele;
				// 获取的标签对象
                this.oPic = ele.querySelector('.pic');
                this.oImg = ele.querySelectorAll('img');
                this.oUl = ele.querySelector('ul');
                this.arrow = ele.querySelector('#arrow');
                this.imgWidth = this.oImg[0].width;
                // 定义参数
                this.loopTimer;
                this.index = 1;
                this.bool;
            }

		// 定义图片运动的方法
            move(ele, obj, back){
            for(let type in obj){
                let speed = parseInt(window.getComputedStyle(ele)[type]);
                let timer = setInterval(function(){
                    let newSpeed = (obj[type] - speed) / 2;
                    newSpeed = newSpeed > 0 ? Math.ceil(newSpeed) : Math.floor(newSpeed);
                    speed += newSpeed;
                    ele.style[type] = speed + 'px';
                    if(speed == obj[type]){
                        clearInterval(timer);
                        back();
                    }
                },100)
            }
        }

		// 定义获取焦点的（图片对应的哪个小圆点）方法
        setLi(){
            let str = '';
            this.oImg.forEach( (item, key) => {
                if(key == 0){
                    str += `<li index="${key+1}" class="active"></li>`
                }else{
                    str += `<li index="${key+1}"></li>`
                }
            })
            this.oUl.innerHTML = str;
        }

		// 定义克隆图片的方法
        copyImg(){
            this.imF = this.oImg[0];
            this.imL = this.oImg[this.oImg.length-1];

            this.first = this.imF.cloneNode(true);
            this.last = this.imL.cloneNode(true);

            this.oPic.insertBefore(this.last, this.imF);
            this.oPic.appendChild(this.first);

            this.oPic.style.width = (this.oImg.length+2) * this.imgWidth + 'px';

            this.oPic.style.left = -this.imgWidth + 'px';
        
        }

		// 定义自动轮播的方法
        autoLoop(){
            this.loopTimer = setInterval( () => {
                this.index++;
                this.move(this.oPic, {left:-this.index * this.imgWidth}, () => {
                    this.stopLoop();
                })
            }, 2000)
        }

		// 定义运动停止的方法
        stopLoop(){
            this.bool = '原始数值';
            if(this.index == this.oImg.length+1){
                this.index = 1;
                this.oPic.style.left = (-this.index * this.imgWidth) + 'px';
            }else if(this.index == 0){
                this.index = this.oImg.length;
                this.oPic.style.left = (-this.index * this.imgWidth) + 'px';
            }
            let oUllis = this.ele.querySelectorAll('ul li');
            oUllis.forEach( (item) => {
                item.className = '';
                if(item.getAttribute('index') == this.index){
                    item.className = 'active';
                }
            })
        }

		// 定义鼠标移入移出事件的方法
        stopStart(){
            this.ele.addEventListener('mouseover', () => {
                clearInterval(this.loopTimer);
            })
            this.ele.addEventListener('mouseout', () => {
                this.autoLoop();
            })
        }

		// 定义焦点切换的方法
        focus(){
            this.oUl.addEventListener('click', (e) => {
                if(e.target.tagName == 'LI'){
                    if(this.bool !== '原始数值'){
                        return;
                    }
                    this.bool = '非原始数值';
                    this.index = e.target.getAttribute('index')-0;
                    this.move(oPic, {left: -index * imgWidth}, function(){
                        this.stopLoop();
                    })
                }
            })
        }

		// 定义左右箭头切换的方法
        leftRight(){
            this.arrow.addEventListener('click', (e) => {
                if(e.target.getAttribute('name') == 'left'){
                    if(this.bool !== '原始数值'){
                        return;
                    }
                    this.bool = '非原始数值';
                    this.index--;
                    this.move(this.oPic, {left: -this.index * this.imgWidth}, () => {
                        this.stopLoop();
                    })
                }else if(e.target.getAttribute('name') == 'right'){
                    if(this.bool !== '原始数值'){
                        return;
                    }
                    this.bool = '非原始数值';
                    this.index++;
                    this.move(this.oPic, {left: -this.index * this.imgWidth}, () => {
                        this.stopLoop();
                    })
                }
            })
        }

		// 定义页面隐藏的方法（防止一个bug）
        hidden(){
            document.addEventListener('visibilitychange' , () => {
                if(document.visibilityState === 'hidden'){
                    clearInterval(this.loopTimer);
                }else if(document.visibilityState === 'visible'){
                    this.autoLoop();
                }
            })
        }
        }

		// 创建实例化对象
        const setloop = new SetLoop(oDiv);
        // 调用其中的方法
        setloop.setLi();
        setloop.copyImg();
        setloop.autoLoop();
        setloop.stopStart();
        setloop.focus();
        setloop.leftRight();
        setloop.hidden();

        如果你还想再添加一些方法，只需要在class类中继续添加方法就可以了，不会对其他的方法产生影响，方便后期修改代码、查找bug、和后续的优化改进。
        所以说面向对象的编程思想对我们开发来说是非常重要的。