面向对象（构造对象及tab切换示例）

面向对象

概述

面向对象是一种编程思想（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)

构建函数构建的步骤

• 自动构建对象
• 手动添加属性
• 自动返回对象

构造函数注意事项：

• 构造函数天生就是用来创建对象的，所以必须和new配合使用，否则就不具备创建对象的能力
• 构造函数内部不能有return关键字，因为构造函数会自动返回对象。如果返回基本数据类型，和不加效果一
  样，如果返回复杂数据类型，构造函数就没意义了。
• 如果new的时候，不需要参数，那么小括号可以省略
• 人们通常将构造函数的首字母大写

使用工厂模式来构建对象

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

工厂模式构建对象的步骤

• 手动初始化一个对象
• 手动给这个对象添加属性
• 手动将这个对象返回

工厂模式构建对象优缺点

优点：可以同时创建多个对象

缺点：创建出来的没有具体的类型（比如是Array和Number），都是object类型的，但我们看到自己的对象只是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)
            }
        })
    }
}
  var box=document.querySelector('#box')
        var tab=new Tab(box)

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