2021-06-19 JS中的普通函数和构造函数的区别

一、JS中的内置类

JS中常见的内置类

1. 每一种数据类型都有自己所属的内置类
   Number、String、Boolean、Symbol、BigInt
   Object、Function、Array、Date、RegExp、Error(ReferenceError/TypeError/RangeError/SyntaxError)…
2. 每一个元素对象也有自己所属的内置类
3. 其余的内置类
   XMLHttpRequest、Promsie、Proxy…

自定义类「类->构造函数」
ES5中：创建一个函数，执行函数的时候基于“new”执行，这样函数被称为构造函数「类」，返回的结果是类的实例
ES6中：基于“class”创建自定义类

普通函数执行和new执行函数的区别

JS代码运行时：

1. 在栈内存中创建EC(G)——全局执行上下文
2. 在EC(G)中创建VO(G)/GO，存储全局变量，进行变量提升
3. 在堆内存中开辟一块地址存储函数堆，堆中存储函数作用域、函数中的代码字符串和函数的属性名(name，length)
4. 代码执行

普通函数执行：

• 在栈内存中创建EC(FN)——函数执行上下文
• 在EC(FN)中创建AO(FN)，存储函数私有变量
• 函数执行：初始化作用域链，初始this，初始arguments，形参赋值，变量提升，代码执行

new执行函数：（把函数当作构造函数执行）

• 在栈内存中创建EC(FN)——函数执行上下文
• 在EC(FN)中创建AO(FN)，存储函数私有变量
• 默认创建一个空对象（FN）的实例对象
• 函数执行：初始化作用域链
• 初始this，让this默认指向之前创建的实例对象
• 初始arguments，形参赋值，变量提升
• 代码执行：后期函数体代码执行中，出现的this.xxx = xxx都是给实例对象设置的私有属性和方法
• 如果函数中没有设置返回值（或返回值是原始类型的值），则默认返回的是“实例对象”，只有自己返回的是对象类型的值，才以自己的返回值为主

例：

function Fn(x, y) {
    let sum = 10;
    this.total = x + y;
    this.say = function () {
        console.log(`我计算的和是:${this.total}`);
    };
}
// let res = Fn(10, 20); //普通函数执行  => Fn函数  res函数返回值
// console.log(res); //undefined
// console.log(window.total, window.say, window.sum); //30 函数 undefined

let f1 = new Fn(10, 20); //构造函数执行  => Fn构造函数(类)  f1类的实例
console.log(f1); //实例对象  total&say