原生js:构造函数及实例化

66 阅读1分钟

一、什么是构造函数

用来实例化对象的函数,通常首字母大写

      function Person(options) {
        Object.assign(this, options)
      }

      const p1 = new Person({
        name: '小明',
        age: 19,
        play: () => {
          console.log('玩')
        },
        girlF: { name: '小红', age: 18 }
      })
      const p2 = new Person({
        name: '大明',
        age: 20,
        play: () => {
          console.log('大明玩')
        },
        girlF: { name: '富婆', age: 60 }
      })

二、实例化对象的几种方式

1、字面量的方式

      const obj = {
        name: 'xx',
        age: 18
      }

const obj = {}是const obj = new Object()的语法糖

2、通过js内置构造函数Object实例化对象

      const obj = new Object({
        name: 'xx',
        age: 18
      })

3、通过构造函数实例化一个对象

三、new操作符干了啥

  1. 开辟一块内存空间,存放实例对象
  2. 构造函数中的this原来指向window,通过new指向实例对象,并且this中默认加上__proto__属性,指向构造函数的prototype
  3. 执行构造函数,将构造函数上的属性和方法添加到实例对象(this)身上
  4. return this

如果不用new,大概就是这样实现

      function Person(options) {
        const obj = Object.assign({}, options)
        return obj
      }

      const p = Person({
        name: '小明',
        age: 19,
        play: () => {
          console.log('玩')
        },
        girlF: { name: '小红', age: 18 }
      })

四、构造函数中的返回值

  1. 如果一个函数当做构造函数使用,那么在执行此函数时,一般会结合new操作符。new操作符会默认return this
  2. 如果手动地加上return,return简单数据类型会被忽略,return复杂数据类型时new操作符接收到的就是该复杂类型数据
      function Person() {
        return 100 // return简单数据类型会被忽略
      }

      function Food() {
        return [] // return复杂数据类型时,通过new操作符接收到的就是该复杂数据类型
      }

      const p = new Person()
      const f = new Food()

      console.log(p) // Person的实例对象
      console.log(f) // []