4、面向对象基础知识（new函数的处理过程）

1、 JS内置类

 *   + Number  String  Boolean  Symbol  BigInt
 *   + Object
 *      + Object
 *      + Array
 *      + NodeList、HTMLCollection...
 *      + RegExp
 *      + Date
 *      + Set
 *      + Map
 *      + ...
 *   + Function
 * 每一个HTML元素对象都有一个自己所属的类：
 *    divDOM对象（实例） ->  HTMLDivElement  ->  HTMLElement  ->  Element -> Node -> EventTarget -> Object
 */

小提示：我们可以根据__proto__后面的值来判断这个实例的构造函数是谁

2、自己创造类

/* 
 * 自定义类「自己搞点类，和创建他的实例」
 */
/* function Fn(x, y) {
    let total = x + y;
    this.x = x;
    this.y = y;
    return total;
} */

let total = Fn(10, 20);//执行过程如下：

let total = new Fn(10,20)//执行过程如下：

普通的函数执行和构造函数执行的区别主要有两个，仔细看上面的图

3、 Fn：类「构造函数」 -> 所有的类都是函数数据类型的（包含内置类）

// Number/String/Boolean/Symbol/BigInt/Object/Array/RegExp/Function... 
//  console.log(typeof Object); //=>"function"
//  console.log(typeof Array); //=>"function"

4、f:实例对象 -> 所有的实例都是对象类型的「但是JS中有特殊性」

//    function sum(){}  -> Function实例  ->  typeof sum==="function"
//    let arr=[]  -> Array实例  -> 首先是一个数组，其次才是对象 

5、JS中创建值(实例)有两种方案：

// + 字面量方案
// + 构造函数方案
// 对于对象和函数类型来讲，两种方案除了语法上的区别，没有啥特别的不同；但是对于原始值类型，区别还是很大的「字面量方式返回的是原始值类型，但是构造函数方式返回的都是对象类型，但是都是所属类的实例」；
(1)对象

(2)函数 (3)原始值

let n = 10; //原始值
let m = new Number(10); //对象
console.log(m.toFixed(2)); //->'10.00'
console.log(n.toFixed(2)); //->'10.00'  浏览器默认会把“n”转换为“new Number(n)”对象类型的实例
console.log(n - 10); //->0
console.log(m - 10); //->0  浏览器会默认把对象转换为数字「Symbol.toPrimitive -> valueOf -> toString -> Number」 

(4)Symbol和BigInt类型

// 特殊的：Symbol / BigInt 是不允许被new的
// Uncaught TypeError: Symbol/BigInt is not a constructor 不是构造函数不允许被new
// -> 想获取Symbol对应的对象类型值  => Object([value])获取当前[value]对应的对象类型值