理解-构造函数,new,实例对象,原型,原型链

130 阅读3分钟

1、什么是构造函数

1、是函数,创建对象用的 使用场景:常规的 {...} 语法允许创建一个对象。但是如果需要批量创建多个同类型对象,此时通过构造函数来快速创建多个同类型对象。

    const obj1 = {
      name: '张三',
      age: 18,
    }
    const obj2 = {
      name: '李四',
      age: 10
    }
    const obj3 = {
      name: '王五',
      age: 81
    }
// 这样就显得代码很多,也不好维护
function Student(name,age) {
      // 自动把内部的this,指向当前的实例对象
      // 构造函数内部,给实例对象添加属性和方法的过程,称之为实例化
      this.name = name
      this.age = age
    }

    // 创建第一个学生对象
    // 构造函数配合new创建的对象,称之为实例对象,简称实例
    const stu1 = new Student('张三',18)
    console.log(stu1)

    const stu2 = new Student('李四',21)
    console.log(stu2)

注意点:

  1. 构造函数函数名首字母大写,一般给类型单词
  2. 使用构造函数的时候需要配合new关键词使用
  3. 通过构造函数new出来的对象,称之为实例对象
  4. 构造函数创建实例对象的过程,称之为实例化
  5. 如果需要在构造函数中给创建的对象添加属性,可以通过this添加,因为构造函数中的this执行当前创建出来的对象

2、new操作符

    // 创建教师对象 Teacher
    function Teacher() {
      this.name = '小菲'
      this.age = '81'
    }

    const t1 = new Teacher
    console.log(t1)

实例化的执行过程:

  1. 创建一个空对象
  2. 把构造函数中的this指向这个空对象
  3. 执行构造函数中的代码→实例化
  4. 自动返回return这个对象

3、实例成员&静态成员

1、实例成员:实例对象可以访问的属性和方法

Snipaste_2023-07-10_21-03-06.png

2、静态成员:构造函数可以访问的属性和方法 注意点:万物皆对象,其实函数也可以看成是一个对象,因此可以有属性和方法

Snipaste_2023-07-10_21-05-37.png

4、原型

原型:prototype

作用:集中管理实例们的公共方法

使用方法:把所有公共的方法都往原型上加 prototype:

  1. 函数本质也是对象,也可以有属性和方法,而函数有一个内置属性:prototype,对应的值就是一个对象(原型对象)

  2. 这个prototype属性,是js内置的,不用自己设置

注意点:

  1. 通过构造函数创建出来的所有实例对象,都可以共享访问到原型对象上的方法或属性

  2. 开发中会把所有实例的公共方法,都添加到构造函数的原型上


 // 原型:prototype
    // 作用:集中管理实例身上的公共方法
    // 使用方法:把所有公共的方法都往原型上加

    // prototype:是每个函数身上的内置属性
    function Student() {

    }

    console.log(Student.prototype)

    // 给构造函数的原型上添加方法
    Student.prototype.study = function () {
      console.log('我敲代码贼溜')
    }

    // 实例对象
    let stu1 = new Student()
    console.log(stu1)
    stu1.study()

    let stu2 = new Student()
    console.log(stu2)
    stu2.study()

Snipaste_2023-07-10_21-16-14.png 原型- this指向 构造函数和原型对象中的this 都指向 实例对象

5、原型链

原型链:实例可以通过__proto__,一级一级的往上找到原型对象的这层链式关系,就是原型链

Snipaste_2023-07-10_21-19-08.png

  // 学生构造函数
    function Student(name, age) {
      this.name = name
      this.age = age
    }

    // 原型对象
    Student.prototype.say = function () {
      console.log('大家吼')
    }

    // 实例对象
    let stu = new Student('小明',18)
    console.log(stu)
    stu.say()

    console.log(stu.toString())

    console.log(stu.__proto__.__proto__)
    console.log(stu.__proto__.__proto__.__proto__)

    console.log(stu.__proto__.__proto__.constructor === Object)
    console.log(Object.prototype === stu.__proto__.__proto__.constructor.prototype)

Snipaste_2023-07-10_21-20-29.png