学习Js-day15

面向对象

概述：

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

构建函数构建的步骤

// 构造对象
    /* // 利用类里面的构造器来构建对象
     class Person {
        constructor(age) { //构造器 其实就是一个构造函数
            this.age = age
        }
    }
    // 使用new关键词来构建
    var person1 = new Person(18)
    console.log(person1);  */

    // 使用构造函数来构建对象
    function Person(age) {
        this.age = age
    }
    var person = new Person(17)
    console.log(person);//Person {age: 17}
    // 判断当前这个类是否是object
    console.log(person instanceof Object);//true
    console.log(person instanceof Person);//true
    // 构造函数构建对象的步骤
    // 自动构建一个对象
    // 手动给这个对象添加属性
    // 自动将这个对象返回

    // 使用工厂模式来构建对象
    function factory(age){
        var obj = new Object()
        obj.age = age
        return age
    }
    var person = factory(19)
    console.log(person);//19
    console.log(person instanceof Object);//false
    console.log(person instanceof Person);//false

    // 工厂模式构建对象的步骤
    // 手动初始化一个对象
    // 手动给这个对象添加属性
    // 手动将这个对象返回
    // 缺点：不能很好的去补充细节 优点：可以构建任何对象

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

抽取对象

主要思想

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

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

示例

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

属性：年纪，成绩，性别

方法：走，跳，跑

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

// 不会动的（名词）抽为属性
    // 会动的（动词）抽成方法
    // 示例tap栏切换
    class Tab {
        constructor(element){
            this.btns = element.querySelectorAll('.top>span')
            this.contents = element.querySelectorAll('.content>div')
            this.handlerClick()
        }
        toggle(span){
            Array.from(this.btns).forEach((span)=>{
                span.className = ""
            })
            span.className = "selected"
            Array.from(this.contents).forEach(div=>{
                div.style.display = 'none'
            })
            let index = Array.from(this.btns).findIndex(v=>{
                return v == span
            })
            this.contents[index].style.display = 'block'
        }
        handlerClick(){
            var_self = this
            Array.from(this.btns).forEach((span)=>{
                span.onclick = function(){
                    _self.toggle(this)
                }
            })
        }
    }
    var box = document.querySelector('.box')
    var tab = new Tab(box)
</script>

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