面向对象开发

面向对象开发

是一个开发思想

        面向过程

       再开发的过程中, 关注每一个 步骤 细节 顺序, 实现效果

      面向对象

          再开发的过程中, 只关注有没有一个对象能帮我完成

在开发过程中

        面向过程

          按照顺序一步一步来

        面向对象(轮播图)

        找到一个对象, 能帮我完成轮播图

          JS 本身没有, 我们需要第三方

        swiper: 生成一个完成轮播图的对象

      我们:

          当你需要完成一个 功能 A 的时候

          找到 JS 有没有这个完成 功能 A 的对象

          如果没有, 我们 制造一个 "构造函数"

          "构造函数" 可以制造完成 功能 A 的对象

构造函数的能力: 能创造一个 有属性 有方法 合理的 对象

面向对象

        书写一个构造函数

          能创建一个对象包含三个成员

            1. btns

            2. tabs

            3. 方法, 能操作自己的 btns 和 tabs 的方法

          使用这个构造函数创建一个对象, 根据你传递参数来实现选项卡效果

 创建对象的四种方式

1.字面量创建

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

2.内置构造函数创建

使用方法：var obj = new Object()

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

3.工厂函数创建对象

        先自己做一个工厂函数

        使用自己做的工厂函数来创建对象

 1. 创建一个工厂函数     function createObj(name, age, gender) {     let obj = {} 1-2. 手动添加成员     obj.name = name     obj.age = 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.自定义构造函数创建

        书写一个构造函数

        使用构造函数创建对象

构造函数的要求

        普通函数, 在调用时和 new 关键字连用, 才有构造函数的能力

          和 new 关键字连用 this => 当前对象(new 前面的那个变量名)

// 1. 创建一个构造函数    function createObj(name, age, gender) {      this.name = name      this.age = age      this.gender = gender    }// 2. 创建对象    let o1 = new createObj('Jack', 18, '男')// 本次调用的时候, 函数内部的 this 就指向 o1    console.log(o1)     let o2 = new createObj('Rose', 20, '女')    console.log(o2)

构造函数的书写和使用

        构造函数也是函数, 只不过是在调用的时候和 new 关键字连用了

        目的: 就是为了创建一个 有属性 有方法 合理的 对象

1. 调用必须有 new 关键字

        没有 new,没有创建对象的能力

        有 new，自动创建一个对象

function fn() {}  let o1 = new fn()    console.log(o1)；

      2. 构造函数内部不写 return

        return 为基本数据类型, 写了白写

        return 为复杂数据类型, 构造函数白写

 function fn() {      this.a = 100；// 基本数据类型写了白写       return 123；// 复杂数据类型, 构造函数白写       return new Date()；     }    let o1 = new fn()；     console.log(o1)；

      3. 构造函数在调用的时候,

如果不需要传递参数, 最后的小括号可以不写，推荐都写上

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

      4. 构造函数推荐首字母大写

    为了直观看出和普通函数的区别

      看到首字母大写的函数, 基本上就要和 new 连用

 function Fn() {       this.a = 100   }

      5. 当函数和 new 关键字连用

      会创造对象, 我们关创造出来的对象叫做 实例对象

        创造的过程叫做 实例化 的过程

        构造函数体内的 this 指向当前实例对象

构造函数是否合理

        构造函数体内书写方法的时候

        创建多少个实例化对象, 那么就有多少个方法要占用内存空间

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

prototype (原型 / 原型对象)

        解释： 每一个函数天生自带一个属性叫做 prototype,

        只要函数定义好以后, 这个 prototype 就生成了 。

        构造函数也是函数, 构造函数也有 prototype, 我们可以添加一些内容

        这个天生自带的 prototype 里面有一个属性叫做 constructor

          表示我是哪一个构造函数伴生的原型对象

function Person() {}    Person.prototype.sayHi = function ()    {       console.log('hello world')；    }    console.log(Person.prototype)；

 __proto__

        解释: 对象天生自带一个属性, 叫做 __proto__,

指向所属构造函数的 prototype

        实例化对象也是一个对象,也有 __proto__ 属性

function Person() {}    Person.prototype.sayHi = function () {      console.log('hello world');    }    let p1 = new Person();    console.log(p1);    // 当我访问 p1.__proto__ 的时候就应该由 sayHi    console.log('Person.prototype', Person.prototype);    console.log('p1.__proto__', p1.__proto__);    console.log(Person.prototype === p1.__proto__);