面向对象的编程

概述：

面向对象是一种编程思想（oop），面向对象相对于面向过程的一个抽取和简化。主要是以类来构建对象，以对象来存储对应的行为及属性，抽取对应的行为做为方法 ，抽取对应的属性做为属性。面向对象核心 万物皆对象（所有的内容都可以抽取为一个对象）关键点：找有这个行为的对象去完成这个行为

面向对象和面向过程

面向过程以过程为核心

示例（去饭店吃饭）

• 1.先找饭店

• 2.找服务员点餐

• 3.等待上菜

• 4.吃饭

• 5.结账

面向对象以对象为核心

示例

• 我找饭店 （我这个对象 饭店这个对象）

• 结账 吃饭 点餐属于我的行为

• 饭店提供的相关内容就是饭店的行为

对象的构建

调用new关键词 去执行对应的构造函数来构建对象

通过类来构建对象（构造器）es6

class Person{
    constructor(username){
        this.name = username
    }
}
var person = new Person('jack')

通过构造函数来构建（es3）

//以构造函数构建 首字母大写
function Dog(name){
    this.name = name //函数里面的this指向它的调用者 在new的时候指向对应的对象实例
}
var dog  = new Dog('旺财')

上述的俩种构建方式其实核心上是一种 都是通过构造函数（构建对象的函数）来构建。

通过构造函数构建做了什么操作

• 自动构建对象

• 手动设置属性

• 自动返回对象

通过工厂模式来构建对象

• 手动创建对象

• 手动设置属性

• 手动返回对象

//以工厂模式来构建
//工厂里面要传入对应的属性 返回对应的对象(不能区分类型)
function factory(name){
    //Object是最大的对象 手动构建对象
    var obj = new Object()
    //手动给obj设置相关的属性
    obj.name = name
    //手动返回对应的对象
    return obj
}
//调用
var obj = factory('旺财')
var obj1 = factory('jack')
console.log(obj,obj1);

工厂模式的特性

• 可以构建所有的对象

• 在构建对象的时候会忽略细节

• 构建出来的对象都是Object（instanceof全部指向Object）

console.log(obj instanceof Object);//true
console.log(obj1 instanceof Object);//true

面向对象的三大特性

• 封装 （将对应的行为抽取为方法 属性抽取为属性）

• 继承 （子类继承父类的属性和方法）

• 多态 (继承关系的体现 重写（子类重写父类的方法） 重载（在一个类有俩个同名的方法 js不允许 没有重载）)

封装示例

示例: 有一个猫会喵喵叫 很胖800斤 吃的很多 名字叫咪咪

属性： 体重800 名字咪咪

方法： 喵喵叫 吃的很多

继承及对应的重写

class Person{
    constructor(){
        // var sex = '男'
        this.name = 'jack'
        this.say = ()=>{
            console.log('哈哈哈哈');
        }
    }
}
class Son extends Person{
    constructor(age){
        super() //调用Person的constructor
        this.age = age
        //重写
        this.say = ()=>{
            console.log('嘻嘻嘻嘻');
        }
    }
}
var son = new Son()
console.log(son);//name say age 
son.say() //嘻嘻嘻嘻

面向对象tab栏切换

属性：上面的tab栏 下面的显示框

方法: 上面的点击事件 切换下面的显示栏的方法