当前位置：首页 > news >正文

前端基石：构造函数和普通函数

news 来源：原创 2024/11/18 12:32:08

前言

function Fn() {// ...
}

let f1 = Fn();
let f2 = new Fn();

在上面的代码中，一个 Fn 函数有两种命运，普通函数执行，new 构造函数执行。那这两种执行方法有什么区别了？

简单来理解，普通函数执行，是把 Fn 函数执行的结果返回给 f1。构造函数执行，把 Fn 当做一个类，是把创造的一个实例返回，f2 是创造出来的一个实例。

本文将从执行流程中为大家分享这两类函数的区分。

代码执行前奏

全局执行上下文进栈执行

1.初始化变量对象（VO）
2.初始化作用域链<<window, ->>
3.初始化 this
4.初始化 arguments（没有）
5.形参赋值（没有）
6.变量提升，Fn 变量提升，声明 + 定义（let 没有变量提升，所以 f1、f2 不会声明也不会在这个阶段被定义）
7.代码执行

全局上下文代码执行

1.Fn 不做任何操作，在上一步已经被声明+ 定义
2.f1 = Fn()，普通函数执行，函数执行创建一个新的执行上下文进栈执行
3.f2 = new Fn()，构造函数执行，大多数构造函数执行和普通函数执行是一样的，但是有几点不太一样。

为了方便区分，下文中 Fn(f1) 指代的是普通函数 Fn 执行。Fn(f2) 指代的是 new Fn()执行。

普通函数执行

Fn(f1)进栈执行

1.Fn(f1) 私有上下文进栈执行
2.初始化变量对象 AO(f1)
3.初始化作用域链<<EC(f1), EC(G)>>
4.初始化 this
5.初始化 arguments
6.形参赋值
7.变量提升
8.代码执行 …
9.函数由于没有返回，所以默认返回 undefined，f1 被赋值为 undefined ，在全局的 VO(G) 中 f1 = undefined
10.函数执行完成出栈

存储示意图

Fn(f2) 进栈执行

1.Fn(f2) 私有上下午进栈执行
2.初始化变量对象 AO(f2)
3.在构造函数执行，初始化作用域链之前，浏览器会默认先创建一个对象（空对象，Fn 的实例对象）
4.初始化作用域链<<EC(f2), EC(G)>>
5.初始化 this，这里的初始化 this，会将 this 指向第三步创建的对象，所以在后期代码中执行 this.xx = xx 的时候，实际上就是在往这个对象(实例对象)上添加属性或者方法，这里还需要注意下，构造函数执行，函数内部的私有变量和实例是没有关系的。
6.初始化 arguments
7.形参赋值
8.变量提升
9.代码执行
10.**函数执行完，出栈之前，会查看构造函数本身的返回结果：**1.**如果有「return 对象」，则以返回值为主，f2 就会等于这个返回值对象。**2.如果没有返回值或者返回的是一个原始值，则浏览器默认会将创建的实例返回，f2 就会等于这个实例对
11.函数出栈

存储示意图

总结

JavaScript 这一门语言本身是基于类和实例构建和组成的。当我们将一个函数当做构造函数执行时和普通函数有大致三点不同：

在构造函数执行，初始化作用域链之前，浏览器会默认先创建一个对象（空对象，Fn 的实例对象）。
初始化 this，这里的初始化 this，会将 this 指向第三步创建的对象，所以在后期代码中执行 this.xx = xx 的时候，实际上就是在往这个对象(实例对象)上添加属性或者方法，这里还需要注意下，构造函数执行，函数内部的私有变量和实例是没有关系的。
**函数执行完，出栈之前，会查看构造函数本身的返回结果：**1.**如果有「return 对象」，则以返回值为主，f2 就会等于这个返回值对象。**2.如果没有返回值或者返回的是一个原始值，则浏览器默认会将创建的实例返回，f2 就会等于这个实例对