JS-part14.1-面向对象开发 / 创建对象的四种方式 / 构造函数的书写和使用

了解面向对象开发

+ 是一个开发思想(你写代码的方式)
+ 面向过程
  => 在开发的过程中, 关注每一个 步骤 细节 顺序, 实现效果
+ 面向对象
  => 在开发过程中, 只关注有没有一个对象能帮我完成

   例子: 我今天要吃面条
     + 面向过程
       1. 和面 - 多少面粉 多少水
       2. 切面 - 多宽 多细
       3. 煮面 - 多长时间
       4. 拌面 - 多少酱 多少面
       5. 吃面 - 一口吃多少
     + 面向对象
       1. 找一个面馆
       2. 点一碗面
       3. 等着吃
     + 面向对象: 对面向过程的高度封装(高内聚低耦合)

在开发过程中
 + 面向过程
   => 按照顺序一步一步来
   
 + 面向对象(轮播图)
   => 直接找到一个对象, 能帮我完成轮播图
   => JS 本身没有, 我们需要第三方 swiper
   => swiper: 生成一个完成轮播图的对象
   
 + 我们:
   => 当你需要完成一个功能 A 的时候
   => 我们找到 JS 有没有这个完成功能 A 的对象
   => 如果没有, 我们制造一个"机器"
   => 这个"机器"可以制造完成功能 A

"机器" 是什么
 + 能力: 能创造一个 有属性 有方法 的 合理的 对象
  + 构造函数就是这个 "机器"

当我们完成一个功能的时候, 我们先利用构造函数来书写一个完成功能的"机器", 然后用构造函数去创建一个对象来帮助完成

模拟: 选项卡
  + 面向过程
    1. btns: [按钮1, 按钮2, 按钮3]
    2. tabs: [盒子1, 盒子2, 盒子3]
    3. 事件: 让 btns 里面的成员添加点击事件, 操作 btns 和 tabs 里面的每一个
  + 抽象成对象
    o = {
      btns: [按钮1, 按钮2, 按钮3]
      tabs: [盒子1, 盒子2, 盒子3]
      方法: function(){
        给 o.btns 里面的每一个绑定事件
        操作 o.btns 和 o.tabs 里面的每一个操作类名
      }
    }
  + 面向对象
    + 书写一个构造函数
    => 能创建一个对象包含三个成员
      1. btns
      2. tabs
      3. 方法, 能操作自己的 btns 和 tabs 的方法
    => 使用这个构造函数创建一个对象, 根据你传递的参数来实现选项卡效果

创建对象的四种方式

1. 字面量创建

var obj = {}

let o1 = {
   
    name: 'Jack',
    age: 18,
    gender: '男'
}

// 当我需要第二个对象的时候
let o2 = {
   
    name: 'Rose',
    age: 20,
    gender: '女'
}

对于Key值相同的对象无法批量创建, 不满足"高内聚低耦合"

2. 内置构造函数创建

var obj = new Object()

let o1 = new Object()
o1.name = 'Jack'
o1.age = 18

// 当我想创建第二个对象的时候
let o1 = new Object()
o1.name = 'Rose'
o1.age = 20

和字面量创建相同, 不能批量创建

3. 工厂函数创建对象

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

// 1. 创建一个工厂函数
function createObj(name, age, gender){
   
    // 1-1. 手动创建一个对象
    let obj = {
   }

    // 1-2. 手动添加成员
    obj.name = name
    obj.name = age
    obj.gender = gender

    // 1-3. 手动返回这个对象
    return obj
}

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

// 创建第二个对象
let o2 = createObj('Rose', 20, '女')
console.log(o2)

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. 自动返回这个对象
}

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

// let o2 = createObj('Rose', 20, '女')   // undefined, 因为没有关键字 new , 构造函数里不自动返回对象, 即没有创造对象的能力

let o2 = new createObj('Rose', 20, '女')
console.log(o2)

构造函数

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

有属性 有方法 合理 的 对象

构造函数的书写和使用

1. 调用必须有 new 关键字
  => 如果没有, 那么没有创建对象的能力
  => 只要有, 就会自动创建一个对象
  
2. 在构造函数内部不要写 return
  => 如果 return 基本数据类型, 写了也白写, 得到的还是对象
  => 如果 return 复杂数据类型, 构造函数白写, 返回复杂数据类型
  
3. 构造函数在调用的时候, 如果不需要传递参数, 最后的小括号可以不写
  => 但是最好都写上
        
4. 构建函数推荐首字母大写
  => 直观, 区别普通函数
  => 看到首字母大写的函数, 基本上就要和 new 连用
  
5. 当函数和 new 关键字连用
  => 会创造对象, 我们将创造出来的对象叫做 实例对象
  => 我们将创造的过程叫做 实例化 的过程
  => 构造函数体内的 this 指向当前实例对象
  => 也就是本次 new 的时候创建的那个对象

// 1. 必须和 new 关键字连用
function fn(){
   }
let o1 = new fn()
console.log(o1)
let o2 = fn()
console.log(o2)

// 2. 不要写 return
function fn(){