面向对象思想(js)

2019独角兽企业重金招聘Python工程师标准>>>

什么是面向对象思想：

面向对象是一种思想，是基于面向过程而言的，就是说面向对象是将功能等通过对象来实现，将功能封装进对象之中，让对象去实现具体的细节；这种思想是将数据作为第一位，而方法或者说是算法作为其次，这是对数据一种优化，操作起来更加的方便，简化了过程。面向对象有三大特征：封装性、继承性、多态性，其中封装性指的是隐藏了对象的属性和实现细节，仅对外提供公共的访问方式，这样就隔离了具体的变化，便于使用，提高了复用性和安全性。对于继承性，就是两种事物间存在着一定的所属关系，那么继承的类就可以从被继承的类中获得一些属性和方法；这就提高了代码的复用性。继承是作为多态的前提的。多态是说父类或接口的引用指向了子类对象，这就提高了程序的扩展性，也就是说只要实现或继承了同一个接口或类，那么就可以使用父类中相应的方法，提高程序扩展性，但是多态有一点不好之处在于：父类引用不能访问子类中的成员。

举例来说：就是：比如说你要去饭店吃饭，你只需要饭店，找到饭店的服务员，跟她说你要吃什么，然后就会给你做出来让你吃，你并不需要知道这个饭是怎么错做的，你只需要面向这个服务员，告诉他你要吃什么，然后他也只需要面向你吃完收到钱就好，不需要知道你怎么对这个饭进行吃。

1、特点：

1：将复杂的事情简单化。

2：面向对象将以前的过程中的执行者，变成了指挥者。

3：面向对象这种思想是符合现在人们思考习惯的一种思想。

2、面向对象的三大特征：封装，继承、多态

1.封装：只隐藏对象的属性和实现细节，仅对外提供公共访问方式

好处：将变化隔离、便于使用、提高复用性、提高安全性

原则：将不需要对外提供的内容隐藏起来；把属性隐藏，提供公共方法对其访问

2.继承：提高代码复用性；继承是多态的前提

注：

①子类中所有的构造函数都会默认访问父类中的空参数的构造函数，**默认第一行有super()；**若无空参数构造函数，子类中需指定；另外，子类构造函数中可自己用this指定自身的其他构造函数。

3.多态

是父类或接口定义的引用变量可以指向子类或具体实现类的实例对象

好处：提高了程序的扩展性

弊端：当父类引用指向子类对象时，虽提高了扩展性，但只能访问父类中具备的方法，不可访问子类中的方法；即访问的局限性。

前提：实现或继承关系；覆写父类方法。

实例:面向对象内部实现一个tab栏切换：

//沙箱模式来保护插件中代码不收外界影响
(function(window){
    //页面中有多个tab栏怎么控制
    function Tab(option){
        //将所有的tab都看成对象
        //每个tab实例所控制标签是不同的，所有tab实例，控制tab切换的方法是相同的
        this.tabMenus=null; //存储所有的导航li标签
        this.tabMains=null; //存储所有的内容的div标签
        this.init(option); //初始化
    }
    
    Tab.prototype={
        constructor:Tab,
        //获取tab栏标签的功能
        getEle:function(option){
            //获取所有导航li标签
            this.tabMenus=document.getElementById(option.tabMenuId).children;
            //获取所内容div标签
            this.tabMains=document.getElementById(option.tabMainId).children;
    
            console.log(this.tabMenus);
            console.log(this.tabMains);
        },
        //给tab栏标签绑定事件的功能
        addEvent:function(){
            for (var i = 0; i < this.tabMenus.length; i++) {
                var obj = this.tabMenus[i];
                obj.index=i;
                var that=this;//缓存外部this
                obj.onclick=function(){ //循环注册点击事件
                    //导航排他切换
                    for (var j = 0; j < that.tabMenus.length; j++) {
                        var obj1 =that.tabMenus[j];
                        obj1.classList.remove('active'); //所有li去除active类名
                        that.tabMains[j].style.display='none'; //所有的内容隐藏
                    }
                    //突出显示自己
                    this.classList.add('active');
                    that.tabMains[this.index].style.display='block';
                }
            }
        },
        init:function(option){ //初始化 将创建对象是要执行代码写在里面
            this.getEle(option); //开始获取标签
            this.addEvent();//绑定事件
        }
    
    }
    window.Tab=Tab; //将tab栏构造函数 暴露给外界
    })(window);

转载于:https://my.oschina.net/shuaihong/blog/1555761