面向对象（重点中的重点）

面向对象的概述

面向对象不是一个新的内容，而是一个编程思想（oop）

面向过程

1.去相亲网站

2.填写信息

3.确定目标

4.建立联系

5.约会

....

面向对象

1.找对象（找个媒婆）

2.调用对象的方法（说媒）

面向对象的主要思维是找能做这个事情的对象（万物皆对象 所有的东西都能被当成对象）

了解对象

对象类型属于引用数据类型 关于对象的创建

对象的创建

直接赋值

let obj = {} //对象类型

使用new关键词

let obj = new Object() //首字母是大写的

数组类型

let arr = new Array() //也是数组对象

日期类型

let date = new Date()//日期对象

使用new关键词构建的都是对象

Class 对象模板 用于创建对象的（模板模式）

class Person{ //类  创建对象的模板
    constructor(name,age){ //构造函数
        this.name = name
        this.age = age
    }
}
let person1 = new Person('jack',18) //利用构造函数来构建对象

constructor 构造器模式 （使用new关键词）

1.创建一个构造方法

2.使用this.属性名进行属性赋值

3.使用this.方法名对方法进行赋值

//凡是使用new关键词 后面的东西都是构造函数  内置构造函数
//对象的划分 内置对象 全局对象 自定义对象

function PersonCopy(name,age){ //构造函数 this指向对象实例的
    this.name = name
    this.age = age
    this.eat = function(){
        console.log('吃饭');
    }
}
let person2 =  new PersonCopy('tom',19) //通过构造方法生成一个对象 this执行person2
let person3 =  new PersonCopy('rose',20) //通过构造方法生成一个对象 this执行person3

工厂方法模式

1.创建一个工厂方法

2.创建一个新的object

3.对这个对象的属性及方法进行赋值

4.将这个对象返回

// 饼干厂是生成饼干的 工厂方法模式就是批量生产对象的
//对象
function person(name,age){
    let obj = new Object() //Object 所有的对象的顶层对象叫做Object
    obj.name = name
    obj.age = age
    return obj
}
//调用 不需要new关键词
let person1 = person('jack',20)

工厂方法模式和构造器模式的区别

1.构造模式需要首字母大写 工厂方法模式不需要首字母大写

2.构造器模式不需要return关键词 工厂方法模式需要return

2.构造器模式有this关键词 工厂方法模式没有this关键词

对应的对象的属性及方法进行赋值及调用

赋值

let obj = new Object()
obj.name = 'jack' //属性进行赋值
obj.eat = function(){

​
}//对于方法进行赋值

调用

console.log(obj.name) //获取属性
obj.eat() //调用方法

原型

function PersonCopy(name,age){ //构造函数 this指向对象实例的
    this.name = name
    this.age = age
    this.eat = function(){
        console.log('吃饭');
    }
}
let person2 =  new PersonCopy('tom',19) //通过构造方法生成一个对象 this执行person2
let person3 =  new PersonCopy('rose',20) //通过构造方法生成一个对象 this执行person3
console.log(person2.eat == person3.eat) //false

通过构造方法创建的对象里面的方法 person2对应的eat方法和person3对应的eat方法不是一个方法 所以会导致内存中会有俩个方法的区间被开辟 这个时候会造成资源浪费的事情。所以我们需要解决这个问题，这个时候就有一个东西叫做原型。

prototype

prototype 是所有的函数都有的一个空间，因此构造函数也有这个空间

function Person(){ //无参的构造函数
​
}
//prototype这个空间是一个对象 对象就可以存放对应的内容
console.log(Person.prototype);
Person.prototype.age = '18' //往这个对象里面存放一个age属性
// prototype是函数的 不是对象的
//将方法设置到prototype里面 这个时候对应的方法就只会有一个
Person.prototype.eat = function(){
    console.log('吃饭');
}
let person1 = new Person()
let person2 = new Person()
console.log(person1);
console.log(person2);
console.log(person1.age === person2.age); // true 设置进prototype里面的内容 通过对象来读取只会是一个
console.log(person1.eat == person2.eat);//true
//对于属性一般通过this直接设置 而对于方法使用prototype来设置

普通的属性在构造方法里面进行声明 函数在prototype里面声明

__proto__

__proto__所有的对象都有另一个空间 因此用构造函数构建的对象也有这个空间

function Person(){
​
}
console.log(Person.prototype);//prototype函数的
Person.prototype.eat = function(){ //向函数的prototype设置eat方法
    console.log('hello');
}
//创建一个对象
let person1 = new Person()
console.log(person1.__proto__); //属于对象的属性__proto__也是对象指向谁
console.log(Person.prototype == person1.__proto__);//true
//对象的__proto__指向对应构造函数的prototype
// 对象可以通过__proto__来方法构造函数的prototype
let person2 = new Person()
console.log(person2.__proto__ == person1.__proto__);//true
person2.eat() //去找自己的__proto__ 指向的构造函数的prototype （实际调用的是prototype里面的eat）
// 对应的对象的属性 先去找自己的__proto__里面是否存在 找到了就读取
//找不到 就会向上找（找父亲）（继承） 直到找到或者找不到 找不到一直向上到Object就停止（找的过程叫做原型链）
Object.prototype.name = 'lisi' //给顶层对象Object的prototype里面设置一个name属性
let person3 = new Person()
console.log(person3.name);//person3的__proto__里面是没有name属性 他就会往上去找 找到Object里面prototype
__proto__里面有一个属性叫做constructor 通过这个属性来获取构造器（构造函数）

constructor （对象的__proto__的属性 获取构造函数）

console.log(person3.__proto__.constructor); //获取构造函数
let person4 = new person3.__proto__.constructor() //利用这个构造函数 再new一个对象
console.log(person4.name);//lisi

原型链

一个对象寻找属性的过程 这个过程会一层一层的往上层对象找对应的__proto__空间 ,这个过程被称为原型链

1.先找自己的__proto__属性,找到了就返回

2.找不到就找父亲的构造函数里面的prototype属性

3.再找不到就再往上 直到找到Object停止 如果Object里面没有就是null

对象的赋值是否符合原型链（不遵从 不遵从 不遵从！！！）

person4.age = 18 //构造函数是没有的 不会被添加到构造函数 age属于对象本身的
console.log(person4.__proto__.age);//undefined
person4.name = 'tom'//给对象的name属性赋值 
console.log(person4.__proto__.name);//lisi 
//对象设置属性的时候 不遵从原型链
//找有没有这个属性 有的话进行修改
//没有就进行添加
console.log(person4.name);//tom

总结

1.找能做这个事情的对象

2.调用这个对象 去做相关的事情

Tab栏切换案例

1.封装tab对象

2.属性1为所有的上边栏

3.属性2为所有的下边栏

4.切换的方法