JavaScript面向对象编程

一、什么是面向对象

面向对象（Object-oriented）是一种程序设计的方法，它将数据和操作数据的函数封装在一起，形成对象。对象是指一个具体的实体，具有属性和行为。面向对象的程序设计关注于对象之间的交互和信息的传递，通过封装、继承和多态等机制来实现代码的模块化和重用，提高了程序的可维护性、可扩展性和可复用性。通俗来讲就是一种开发思想（写代码的方式）

二、什么是面向过程

面向过程是一种编程思想，它将程序看作一系列顺序执行的操作步骤，每个步骤都是围绕数据的处理而设计的。在面向过程的编程中，程序主要由一系列函数组成，每个函数都执行特定的任务，并通过参数和返回值来传递数据。程序的执行流程是线性的，由上到下依次执行每个函数。面向过程的编程关注的是如何解决问题，而不太关注数据的组织和封装。

面向过程： 在开发过程中，关注每一个 步骤 细节 顺序，实现效果
面向对象：在开发过程中，只关注有没有一个对象能帮我完成

举个栗子：今天我要吃面条
面向过程

1. 和面 - 多少面粉 多少水
2. 切面 - 多宽 多细
3. 煮面 - 多长时间
4. 拌面 - 多少酱 多少面
5. 吃面 - 一口吃多少

面向对象

1. 找一个面馆
2. 点一碗面
3. 等着吃

面向对象:是对面向过程的高度封装(高内聚 低耦合)

在开发过程中

面向过程：按照顺序一步一步来面向对象(轮播图)

面向对象：找到一个对象，能帮我完成轮播图，JS 本身没有，我们需要第三方，swiper:生成一个完成轮播图的对象

当你需要完成一个功能A 的时候，我们找到 JS 有没有这个完成功能A 的对象，如果没有，我们制造一个“机器"，这个"机器”可以制造完成功能A的对象

"机器”是什么？

能力：能创造一个 有属性 有方法的 合理的 对象

所以接下来让我们去制造这个机器（也就是对象）

三、创建对象的四种方式

1.字面量创建

let obj = {}

//当我想创建第一个对象时
let o1={
    name：'Jack',
    age:20,
    gender:'男'
}

//当我想创建第二个对象时
let o2={
    name：'Rosse',
    age:18,
    gender:'女'
}

2.内置构造函数创建

let obj = new Object（）

//当我想创建第一个对象时
let o1=new Object
o1.name = 'Jack'
o1.age = 20

//当我想创建第二个对象时
let o2=new Object
o2.name = 'Rose'
o2.age = 18

3.工厂函数

1. 先自己做一个工厂函数
2. 使用自己做的工厂函数来创建对象

//1.创建一个工厂函数
function createObj(name，age，gender){
    //1-1.手动创建一个函数
    let obj ={}
    
    //1-2.手动添加成员
    obj.name = name
    obj.age = age
    obj.gender = gender
    
    1-3.手动返回工厂函数
    return obj
}

//使用工厂函数创建对象
//创建第一个对象
let o1 = createObj('Jack',18,'男')

//创建第二个对象
let o1 = createObj('Rose',20,'女')

4.自定义构造函数创建

1. 自己写一个构造函数
2. 使用构造函数创建对象

构造函数就是普通函数，构造函数除了首字母大写其余的与普通函数没有任何区别 ，只有在你调用的时候和 new 关键字连用，才有构造函数的能力。
只要你和 new 关键字连用 this就指当前实例对象(new 前面的那个变量名)

//1.创建一个构造函数
function createObj(name，age，gender){
  //1-1. 自动创建一个对象
    
  //1-2.手动想对象上添加内容
   this.name = name
   this.age = age
   this.gender = gender
    
  //1-3.自动返回对象
  
}

//创建对象
let o1 =new createObj('Jack',18,'男')  //本次调用的时候，函数的内部this，就指向o1

let o1 =new createObj('Rose',20,'女')

四、构造函数的书写和使用

明确：构造函数也是函数，只不过在调用的时候和new连用了
目的：就是为了创建一个 有属性 有方法的 合理的 对象

1.必须和new关键连用

调用必须有 new 关键字
如果没有，那么没有创建对象的能力
只要有，就会自动创建一个对象

function fn (){}
let o1 = new fn()

2.不要写return

在构造函数内部不要写return
如果return 基本数据类型，写了白写
如果return 复杂数据类型，构造函数白写

function fn(){
    return 123
}
let o1= new fn()
consloe.log(o1) //没有数据

3.不传递参数 () 可以不写

构造函数在调用的时候，如果不需要传递参数，最后的小括号可以不写

function fn(){
    this.a=100
    this.b=200
}
let o1 = new fn()
console.log(o1)
let o2 = new fn
console.log(o2)

4.构造函数首字母大写

构造函数推荐首字母大写
=>是为了直观看出和普通函数的区别
=>看到首字母大写的函数，基本上就要和new 连用

function Fn(){
    this.a = 100
    this.b = 200
    this.c = 300
}
function fun(){
    var a = 100
    var b = 200
    return a+b
}

5.函数和new连用

当函数和 new 关键字连用
=>会创造对象，我们管创造出来的对象叫做 实例对象
=>我们管创造的过程就做 实例化 的过程
=>构造函数体内的 this 指向当前实例对象

function Person(name){
    this.name = name
    this.sayHi=function(){
        console.log('你好')
    }
}
//本次new的时候，Person会创造一个对象
//把创造出来的对象赋值给了 变量p1
//我们管 p1 叫做Person 的实例对象
//本次调用的时候，Person 函数内部的 this 就指向 p1
let p1 = new Person()

//本次new的时候，Person会创造第二个对象
//赋值给了 变量p2
//p2 也是Person 的实例对象
//本次调用的时候，Person 函数内部的 this 就指向 p2
let p2 = new Person()

p1.sayHi()
p2.sayHi()

五、构造函数是否合理

在构造函数体内书写方法的时候
你创建多少个实例化对象，那么就有多少个方法要占用内存空间

function Person(name){
this.name = name
this.sayHi=function(){ console.log('你好 世界')}                                                                                                                                      }

let pl = new Person('张三') //本次创建的时候，会开辟一段内存空间存储 方法函数

let p2 = new Person('李四')  //第二次创建的时候，会再次开辟一段内存空间存储 方法函数

不合理:因为会有多余的函数内存空间被占用