面向对象基础[构造函数VS普通函数]

编程语言

• 面向对象 OOP java、javascript、php、C#(ASP.NET)、Python、GO、C++、Ruby…
• 面向过程 POP C
• 标记语言：HTML / CSS

面向对象编程「对象、类、实例」

• 对象：万物皆对象（泛指）
• 类：对“对象”的划分（按照其功能结构特点，划分出大类和小类）
• 实例：类中具体的事务【实例是和实例之前具备私有的特征也存在大量公共的特征】

JS基于面向对象的

JS本身就是基于面向对象思想开发出来的编程语言，所以我们学习和开发JS的时候，也要按照面向对象的思想去处理！！

内置类

1. 每一种数据类型都有一个自己所属的内置类：Number数字类(每一个数字/NaN/Infinity都是它的实例)、String、Boolean、Symbol、BigInt、Array、RegExp、Date、Function、Object…[Math就是一个普通对象不是内置类]
   

[Math就是一个普通对象不是内置类]

2. 每一种DOM元素也都有自己所属的类：
   - window -> Window -> WindowProperties -> EventTarget -> Object
   - [dir(document)]document -> HTMLDocument -> Document -> Node -> EventTarget -> Object
   - div -> HTMLDivElement -> HTMLElement -> Element -> Node -> …
   - a -> HTMLAnchorElement -> HTMLElement -> …
   - button ->[proto: ]HTMLButtonElement->proto: HTMLElement-> …
   

3. 元素集合和节点集合也是内置类HTMLCollection / NodeList / CSSStyleDeclaration / DOMTokenList …

   • 元素集合HTMLCollection实例【document.getElementsByTagName(’*’)】
     
   • 节点集合NodeList实例【document.querySelectorAll(’*’)】
     

学习数组，首先分析一个数组（实例），研究清楚这个实例的特征后（含：结构特点和常用方法等），我们再遇到其他的数组，直接也是按照相同的机制进行处理的

自定义类

创建一个函数 fn

• fn() 普通函数执行「堆栈机制」
• new fn() 构造函数执行 「堆栈机制 + 面向对象机制」

//自建类仿照内置类首字母大写
function Fn(x, y) {
    let total = x + y;
    this.x = x;
    this.y = y;
}
//普通函数执行
let res1 = Fn();
console.log(res1);//undefined

//构造函数执行
let res2 = new Fn(10, 20);
console.log(res2);//Fn { x: 10, y: 20 }

构造函数VS普通函数执行的区别

• 普通函数执行：Fn(10,20)

1. 先形成一个全局的执行上下文EC(G),然后其中有一个VO(G),变量提升的时候会声明加定义一个函数，函数是一个堆内存。这个函数堆内存分配一个十六进制地址赋值给变量Fn，作用域是全局，形参【x/y】，代码字符串保存在其中。
2. 代码执行：变量提升阶段已经做过的此时直接略过，先让Fn执行，然后执行结果赋值给result。Fn执行的时候形成一个私有的执行上下文EC(FN),其中有一个保存私有变量的对象AO(FN),依次执行：初始化作用域链【<EC(FN),EC(G)>】->初始化this【window】->形参赋值【x=10 y=20】->变量提升->代码执行【this.x=window.x/this.y=window.y,没有返回值默认返回undefined】

• 构造函数执行：new Fn(10,20)
  new函数();构造函数执行，它和普通的函数执行，还是有区别的

【相似】

• 一样是把函数执行(传递实参也是一-样的)----全局下执行是一样的
• 形成私有上下文「按照步骤逐一处理」
• 也存在私有变量
• …

【不同】

1. new执行，浏览器会在当前上下文中，默认创建一个对象(实例对象)
2. 在初始化this的时候，会让this指向这个实例对象
   • 代码中编写this.xxx: =xxx的操作，都是给实例对象设置私有属性呢
   • 除这些操作，其余的操作和实例对象没有直接的关系
3. 函数如果没有返回值，或者返回的是基本类型值，则默认返回创建的实例对象;如果自己返回的是引用类型值，以自己返回的为主;

【构造函数执行】
新称呼:函数被称为类，返回结果是类的一个实例