JS面向对象

认识面向对象

• 面向对象就是一种编程思想

•  轮播图:
           *          面向过程的思想
           *              创建第一个轮播图
           *                  1. const banner = xxx
           *                  2. const imgBox = xxx
           *                  3. const focus = xxx
           *                  4. const index = xxx
           *                  5. function copyEle () {操作 imgBox}
           *                  6. function setFocus () {操作 focus}
           *                  7. function autoPlay () {操作 imgBox 和 index}
           *              创建第二个 轮播图
           *                  1. const banner2 = xxx
           *                  2. const imgBox2 = xxx
           *                  3. const focus2 = xxx
           *                  4. const index2 = xxx
           *                  5. function copyEle2 () {操作 imgBox2}
           *                  6. function setFocus2 () {操作 focus2}
           *                  7. function autoPlay2 () {操作 imgBox2 和 index2}
           *          面向对象的思想
           *                  b1 = {
           *                      banner: xxx,
           *                      imgBox = xxx,
           *                      focus = xxx,
           *                      index = xxx,
           *                      copyEle () {操作 this 的 imgBox},
           *                      setFocus () {操作 this 的 focus},
           *                      autoPlay () {操作 this 的 imgBox 和 this 的 index}
           *                  }
           *                  b2 = {
           *                      banner: yyy,
           *                      imgBox = yyy,
           *                      focus = yyy,
           *                      index = yyy,
           *                      copyEle () {操作 this 的 imgBox},
           *                      setFocus () {操作 this 的 focus},
           *                      autoPlay () {操作 this 的 imgBox 和 this 的 index}
           *                  }
           * 
  

批量生产对象

• 工厂函数方式创建对象：
• 工厂函数其实就是一个函数
• 手动创建一个对象
• 手动给对象添加属性
• 手动返回一个对象

• // 3. 工厂函数
         function createObj (name, age) {
             // 1. 手动创建一个对象
             const obj = {}
   
             // 2. 手动向对象内部添加属性
             obj.name = name
             obj.age = age
   
             // 3. 手动返回一个对象
             return obj
         }
  

      const o1 = createObj('QF001', 18)
      const o2 = createObj('QF002', 28)
      const o3 = createObj('QF003', 38)
      console.log(o1)
      console.log(o2)
      console.log(o3)

​
  
​
- 自定义构造函数：
​
- 自定义构造函数，本质就是一个函数
​
- 但他和new 关键字连用的时候，就叫做构造函数
​
- 自动创建一个对象
​
- 手动向创建的对象添加属性
​
- 自动返回一个对象
​
- ```javascript
   // 4. 自定义构造函数
          function createObj () {
              // 1. 自动创建出来一个对象
  
              // 2. 手动向对象添加属性
  
              // 3. 自动返回一个对象
          }
  
          const o1 = new createObj()  // 这种调用方式, 才是 构造函数
          const o2 = createObj()     // 这就是一个普通函数的调用
  
          console.log(o1)
          console.log(o2)

自定义构造函数的书写

• 一定是和new关键字连用，如果没有和new连用，那么他就是一个普通函数
• 当一个函数和new关键字连用的时候，这个函数就被称为自定义构造函数，这个函数内的this指向，指向返回出来对象
• 构造函数不能使用给箭头函数，因为箭头函数内部没有this
• 构造函数内部不需要return
• 书写构造函数时，首字母建议大写，目的：仅仅是为了和普通函数区分
• 构造i函数通过 new 关键字创建出来的对象，叫做实例化对象，本质上还是一个对象，只不过名字上叫做实例化对象；构造函数通过new关键字创建对象的过程叫做实例化

• function createObj(num1, num2) {
            // 此时 this === 将来被返回出去的对象
            this.a = num1
            this.b = num2
  ​
            // return '我是 一个 普通字符串'
            // return [1, 2, 3, 4, 5]
        }
        const o1 = new createObj(1, 2)
        const o2 = new createObj(10, 20)
        console.log(o1)
        console.log(o2)
  ​
        function Person() {
            this.name = 'QF001'
        }
        const p1 = new Person()
  ​
        /**
         *  const p1 = new Person()
         * 
         *      new Person()        此时这个过程叫做 实例化, Person函数因为和new关键字连用, 我们叫做自定义构造函数
         * 
         *      此时 常量 p1    我们叫做 实例化对象(实例对象)
        */
  

原型

函数访问原型：函数.prototype

对象访问原型：

对象.__proto__

 function Person(name, age) {
            this.name = name
            this.age = age
        }
        Person.prototype.a = '我是后续通过 JS 代码添加到函数的原型内部的属性'
        Person.prototype.sayHi = () => {
            console.log('你好')
        }
        console.log(Person.prototype)   // 打印函数 Person 的原型
​
​
        const p1 = new Person('QF001', 18)
        const p2 = new Person('QF002', 28)

 p1.sayHi()
        console.log(p1.__proto__)
        console.log(p1.a)
​
        console.log(p1.__proto__ === Person.prototype)   // 打印对象的构造函数的原型
        
        console.log(p1.sayHi)
        console.log(p2.sayHi)
        console.log(p1.sayHi == p2.sayHi)

ES6类的语法：class类名{xxxxx}

 class Stu {
            constructor(name) {
                // 这个位置和构造函数的 函数一样
                this.name = name
            }
​
            // 这个位置开始, 全都是原型
        }
        const s1 = new Stu('QF001')
        console.log(s1)