面向对象

面向对象

            概述

                面向对象是一种编程思想（oop），他是将对应的过程替换成对应的对象，而不做去追求对应的过程实

                现，而通过去找对象的方式实现。综合思想：找有这个功能的对象，做这个事情。（面向对象同时具备

                一个点 万物皆对象（所有的内容都可以被充当为对象））

            示例

                按照我们之前的写法，对应的编程思维被称为面向过程。面向就是着重点在于过程。比如去吃面这个事情。

                1. 需要找面馆

                2. 需要找服务员下单

                3. 等厨房做完

                4. 等服务员端上来

                5. 拿双筷子准备吃

                行为是在过程中产生的，这种思想被称为面向过程编程。

                如果是面向对象的话，那么我们的核心就是找对象。对于这个事情我们的做法就是：

                1. 找面馆

                2. 自己等着吃

                从上面可以得到吃面这个事情，着重点在于对象，一个对象是面馆 ，一个对象是自己。这个过程

                产生的行为都属于对象的方法，这个就是面向对象的思想。

            综合一下，面向过程就是从过程中产生行为，面向对象是从行为中找对象（找合适的对象做合适的事情）

            构建对象

                使用new关键词 来实例化对象     

                   利用类里面的构造器来构建对象（es6的）类组件
                   class Person{
                        constructor(age){ //构造器 其实就是一个构造函数
                            this.age = age
                        }
                    }
                    //new 关键词来构建
                    var person = new Person(18)               

　　　　　使用构造函数来构建 （es3的） 函数组件                   

                    function Person(age){
                        this.age = age
                    }
                    //new关键词来构建
                    var person = new Person(18)

                构建函数构建的步骤

                    自动构建对象

                    手动添加属性

                    自动返回对象

                使用工厂模式来构建对象                    

                     function factory(age){
                        //声明一个对象
                        var obj = new Object()
                        obj.age = age
                        return obj
                    }
                    var person = factroy(18)

                工厂模式构建对象的步骤

                    手动初始化一个对象

                    手动给这个对象添加属性

                    手动将这个对象返回

                工厂模式构建对象的不足

                    不能很好的去将细节补充

                    可以构建任何对象

                    instanceof 返回的值只能是Object                       

                        //当前这个类的类型是否是Person类型
                        console.log(person instanceof Person); //false
                        console.log(person instanceof Object); //true

                    instanceOf这个表示的是当前这个对象是通过哪个实例构建的

            抽取对象

                主要思想  

                    不会动的（名词）抽为属性

                    会动的的 （动词）抽成方法  

                示例

                    人年纪18会走会跳会跑性别男上周考试成绩15分

                    属性：年纪，成绩，性别

                    方法：走，跳，跑      

                示例 tab栏切换（面向对象）                  

                        class Tab{
                        constructor(element){
                            //属性
                            this.lis = element.querySelectorAll('ul>li')//里面的li
                            this.content = element.querySelectorAll('div>div') //显示的内容
                            //调用函数
                            this.handlerCick()
                        }
                        toggle(li){ //切换效果
                            //排他思想 先将所有的全部设置一个值 然后再给自己设置一个值
                            Array.from(this.lis).forEach((li)=>{
                                li.className = ""
                            })
                            li.className = "selected"
                            //排他
                            Array.from(this.content).forEach(div=>{
                                div.style.display = "none"
                            })
                            let index = Array.from(this.lis).findIndex(v=>{
                                return v == li
                            })
                            this.content[index].style.display = 'block'
                        }
                        handlerCick(){ //处理点击事件
                            var_self = this
                            Array.from(this.lis).forEach((li)=>{
                                li.onclick = function(){
                                    _self.toggle(this)
                                }
                            })
                        }
                    }

            static 静态修饰

                static修饰的函数 使用类名.方法名

                static修饰的函数 只会初始化一次 （每次调用的都是同一个函数）

                    

                     class Person{
                        constructor(){
                           
                        }
                        run(){
                            console.log('run');
                        }
                        static sayHello(){
                            console.log('hello');
                        }
                    }
                    new Person().run()
                    //静态函数 调用 使用类名.方法名 （static修饰的函数 声明一次）
                    Person.sayHello()
                    Person.sayHello()
                    Person.sayHello()
                    Person.sayHello()
                    console.log(Person.sayHello == Person.sayHello);//true