理解JS原型

JS原型

定义

原型 prototype, 是第一函数由JS自动分配给函数的一个可以被所有构造函数实力对象变量共享的对象变量

---

为什么需要原型

TLDR 节省内存! 原型是一个共享的内存空间, 让可以共享的方法和属性共享

举个例子

function Student(name, grade) {
  this.name = name
  this.grade = grade

  this.course = ['sport', 'science', 'arts']
}

this.course是每个object都会有的属性. 没有prototype, 每次构造出来都会分配一个内存空间储存course.

但是如果有了prototype, 就可以只存在一个地方(原型空间), 然后每次构造出来的student都指向这个空间获取course就可以了, 节省了内存空间

---

函数

• Function: function也是一个对象, 当真正执行函数的时候, 执行环境会为函数分配一个函数对象变量空间和函数对象空间
  const student = new Student('Tim', 5)
student 变量就是函数变量空间, 而new Student('Tim', 5)这个就是函数对象空间, 这个空间会有一个默认的prototype属性, 这个prototype属性就是一个原型对象属性
• 构造函数: 但new 函数() 时, 此刻这个函数就是构造函数

---

如何访问原型对象空间

实例访问一个属性或方法, 首先从实例空间中查找. 当执行环境执行 new 构造函数()时，构造函数中通过 this 定义的属性和方法会分配在这个空间中

1. 如果找到, 停止查找
2. 如果没有找到, 就继续在该实例的原型对象空间中去查找. 对于实例来说, 默认__proto__指向原型对象空间

function Student(name, grade) {
  this.name = name
  this.grade = grade
}

Student.prototype.courseAll = ['sport', 'science', 'arts']

---

总结

1. 原型链通过在原型空间上共享属性节省内存空间
2. 原型链通过类.prototype[key]赋值
   Student.prototype.courseAll=...
3. 实例空间中的__proto__指向函数的原型空间, 函数空间通过__proto__指向函数的原型空间, 函数空间的constructor指向函数空间