面向对象基础「构造函数执行的机制」

面向对象基础

   面向对象：object oriented programming OOP编程/设计思想
      + JS
      + JAVA
      + Python
      + PHP
      + C#
      + C++
      + GO
      + ...
   面向过程：procedure oriented programming POP
      + C语言

面向对象是基于类和实例来管理一门语言的；
@1 在JS中所有要学习和研究的内容都可以被称为“对象”、JS把其划分为很多类、我们平时就是创造这些类的实例进行开发的；
@2 每个实例之间有一些自己的私有属性和方法，也具备类赋予他们的公共的属性和方法；
@3 JS语言本身就是基于 “面向对象” 这种思想设计的语言，所以我们学习和开发也应该按照这种思想来进行处理！！

构造函数执行的机制

JS中的内置类
@1 数据类型所属内置类
+ Number 数字类 每一个数字都是他的一个实例「含NaN」
+ String
+ Boolean
+ Symbol
+ BigInt
+ Object
+ Function
+ Array
+ RegExp
+ Date
+ Error
+ …
@2 DOM元素对象也有自己所属的内置类
+ 每一种HTML标签都有自己所属的内置类 HTMLDivElement / HTMLAnchorElement … -> HTMLElement -> Element -> Node -> EventTarget -> Object
+ document实例 -> HTMLDocument「和 XMLDocument」 -> Document -> Node …
+ window实例 -> Window -> WindowProperties -> EventTarget -> Object
+ 元素集合 -> HTMLCollection -> Object
+ 节点集合 -> NodeList -> Object

示例：

const Fn = function Fn(x, y) {
   
    let sum = 10;
    this.total = x + y;
    this.say = function () {
   
        console.log(`我计算的和是:${
     this.total}`);
    };
   let res1 = Fn(10, 20); //普通函数执行
console.log(res1); //undefined
console.log(window); //window.total、window.say
let f1 = new Fn(10, 20); //构造函数执行「面向对象思维处理：创造类和实例  基于NEW执行，Fn是类，f1是实例」
console.log(f1);
let f2 = new Fn(100, 200);
console.log(f2);
console.log(f1.say === f2.say); //false  构造函数体中 this.xxx=xxx 给实例设置的私有属性方法 

new执行（构造函数执行）也会和普通函数一样创建一个私有上下文（相同点）
区别：
1、会创建当前类、构造函数的一个空的实例对象
2、让构造函数中的this指向这个实例对象
3、代码执行完，观察函数的返回值

• 如果return的一个对象则以自己返回的为主
• 如果返回的是一个原始值或者是没有返回return则默认返回的是这个实例对象

二、「原型和原型链」

大部分“函数数据类型”的值都具备“prototype（原型/显式原型）”属性，属性值本身是一个对象「浏览器会默认为其开辟一个堆内存，用来存储实例可调用的公共的属性和方法」，在浏览器默认开辟的这个堆内存中「原型对象」有一个默认的属性“constructor（构造函数/构造器）”，属性值是当前函数/类本身！！<