初识面向对象及构造函数(初级版)

91 阅读3分钟

创建对象的方式

  • 创建对象的方式(需要能够方便我们批量创建对象) *
    • 1.字面量的方式 * 不利于批量创建
    • 2.内置构造函数 * 不利于批量创建
    • 3.工厂函数的方式 * 其实就是创建一个函数,函数内部可以创建一个对象,我们把这个函数叫做工厂函数

1.字面量方式

let obj1 = {
      name : 'QF001',
      age : 18
    }
    //2.内置构造函数
    let obj = new Object()
   // 3.工厂函数
    function createObj(num){
      //3.1手动创建一个对象
      const obj = {}
      //3.2手动给对象上添加一些属性
      obj.name = 'QF001'
      obj.age = num
      //3.3手动给对象返回
      return obj
    }
    let obj1 = createObj(18)
    console.log(obj1)

自定义构造函数的方式

  • 什么是构造函数
    • 本质上是一个普通函数,如果在调用的时候,前边加上一个关键字new
    • 那么我们把这这种函数叫做构造函数
//工厂函数
    function createObj(num){
   //3.1手动创建一个对象
      const obj = {}
      //3.2手动给对象上添加一些属性
      obj.name = 'QF001'
      obj.age = num
      //3.3手动给对象返回
      return obj
    }
    let obj1 = createObj(18)
    // console.log(obj1)    
    
    //构造函数
    function createObj1(){
      //1.自动创建一个对象
      //2.手动给对象添加一些属性
      this.name = 'QF001'
      this.age = num
      //3.自动返回对象
    }
  • 构造函数的书写
    • 1.构造函数的函数名首字母大写(建议.非强制,)目的就是为了和普通函数做一个区分
    • 2.构造函数内不要写return
      • 如果return的是一个基本数据类型,写了也没用
      • 如果return的是一个引用数据类型,写了就会导致构造函数没用
    • 3.构造函数调用时,必须和new关键字连用,如果不连用也能调用,但是构造函数就没用了
    • 4.构造函数内部的this指向
      • 当一个函数和new关键字连用的时候,那么我们说这个函数时构造函数,然后这个函数的this指向本次调用被自动创建出来的那个对象
      1. 构造函数不能使用箭头函数
      • 因为箭头函数内部没有this
    • 面试题:构造函数有什么注意点?
//构造函数的书写
   function Person (name,age){
      //因为构造函数自动创建的对象可以通过this访问,所以我们需要向对象上添加属性的时候,可以通过this来添加
      this.name = name,
      this.age = age,
      this.a = '我是固定'
   }
   const p1 = new Person('QF666',18)
   console.log(p1)

   function Arr(a,b,c){
    
   }

构造函数的缺点

  • 构造函数的缺点
    • 构造函数内部,如果有引用数据类型,比如函数
    • 在多次调用函数时,每一次都会重新创建一个函数,必然会造成内存空间浪费

原版构造函数(有小问题)

  function Person (name,age){
      this.name = name,
      this.age = age,
      this.a = '我是固定'
      this.fn = function() {
        console.log('我是fn函数')
      }
   }

更新版

 function winFn(){
    console.log('我是fn函数')
  }  
  function Person (name,age){
      this.name = name,
      this.age = age,
      this.a = '我是固定'
      this.fn = winFn
   }
   const p1 = new Person('QF666',18)
    /**
    * 第一次调用Person构造函数
    *   自动创建一个对象
    *     1.添加一个属性name,值为形参nama
    *     2.添加一个属性age,值为形参age
    *     3.添加一个属性a,值为一个固定的字符串
    *     4.添加一个fn,值为一个函数,此时的函数时我们在函数内部定义的一个函数,假设地址为'GD001'
    *   自动返回一个对象
   */
   p1.fn()


   const p2 = new Person('QF001',99)
   
   /**
    * 第一次调用Person构造函数
    *   自动创建一个对象
    *     1.添加一个属性name,值为形参nama
    *     2.添加一个属性age,值为形参age
    *     3.添加一个属性a,值为一个固定的字符串
    *     4.添加一个fn,值为一个函数,此时的函数是我们在这个函数内部定义的一个函数,假设地址为GD002
    *   自动返回一个对象
   */
   p2.fn()
    //判断第一次调用和第二次调用的fn地址是否相同
   console.log(p1.fn === p2.fn)