前置知识

构造函数——可以构造出对象的函数
每个 JavaScript 函数实际上都是一个 Function 对象（即 其构造函数均是Function）
运行 (function(){}).constructor === Function // true 便可以得到这个结论。

类型和类的区别

  • 类型是 JS 数据的分类，有8种
  • number string symbol boolean bigint undefined null object
  • 类是针对于对象的分类，有无数种
  • 常见的有 Array、Function、Date、RegExp 等


new 操作符——JS父爱

创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例

  • new X() 自动做的事情
    • 自动创建空对象
    • 自动为空对象关联原型，原型地址指定为 X.prototype

（即将X.prototype保存的地址复制到空对象proto里）

  • 自动将空对象作为 this 关键字运行构造函数
  • 如果该函数没有手动返回对象，或者return的不是一个对象，则自动 return this对象
    1. function Her(){
    2. // var this = {};
    3. this.name = 'Jon';
    4. // return this;
    5. }
  • 构造函数 X负责：
    • 给新增加的this对象添加本身的属性
      • （由于构造函数搭配new操作，故构造函数一般存放着return的对象的属性或方法）
    • 添加新对象的共用属性

理解以下两张图：
image.png
image.png
上图中：
she.name的返回值是undefined原因
因为我们手动return 了，所以相当于把本来应该返回的新创建的对象this给覆盖了
相当于she是你返回的那个对象，而不是通过new Her构造的对象了

解析：
一般函数也能模拟构造函数的机制
new一个函数时候，这个函数会变成一个构造函数；一般情况下有意为之（即可提前声明一个构造函数等待被new）
new一个函数时候，一般会在其前再声明一个一般函数，用来存储这个new来的构造函数

区分
一般函数构造对象 和 构造函数构造对象
一般区别在return上，而且构造函数的return需要搭配new操作符有奇效
一般函数构造对象时候，return的值可以任意更改，可以 以 对象为返回值
构造函数构造对象时候，搭配new操作符，return的值只能是构造出来的对象，如果return不是一个对象，则返回this（new出来的新对象）
由于构造函数搭配new操作，故构造函数一般存放着return的对象的属性和方法

代码规范

  • 大小写

    • 所有构造函数（专门用于创建对象的函数）首字母大写
    • 所有被构造出来的对象，首字母小写

  • 词性

    • new 后面的函数，使用名词形式
    • 如 new Person()、new Object()
    • 其他函数，一般使用动词开头
    • 如 createSquare(5)、createElement(‘div’)

原型公式

对象.proto === 其构造函数.prototype

  • 「x 的原型」等价于「x.proto 所指的对象」 ，有时为了方便，我们可以认为「x 的原型」等价于「x.proto 」

  • 一个对象的原型指的是这个对象与其他同类对象的公有属性的集合，比如 obj1 和 ob2 同时拥有 toString / valueOf，那么 toString / valueOf 等属性组成的对象，就是 obj1 和 obj2 的原型，这个原型的地址一般储存在构造函数的 prototype 里

  • f1.prototype.constructor = f1 //每个函数出生就有prototype的属性（除了箭头函数），且里面必定会有constructor属性，而且constructor属性里必定是函数名本身

  • 如果一个对象不是函数，那么这个对象一般来说没有 prototype 属性，但这个对象一般一定会有 proto 属性