转行前端(JS篇10):构造函数执行机制

160 阅读2分钟

普通函数执行

1、形成一个私有的作用域

2、形参赋值

3、变量提升

4、代码执行

5、栈内存释放问题

function Fn(name,age){
var n=10;
this.name=name;
this.age=age+n
}

构造函数执行

1、向普通函数执行一样,形成一个私有的作用域(栈内存)

形参赋值 变量提升

2、【构造函数执行独有】 在JS代码自上而下执行之前,首先再当前形成的私有栈中创建一个对象(创建一个堆内存:暂时不存储任何的东西),并且让函数中的执行主体this指向这个新的堆内存(this===创建的对象)

3、代码自上而下执行

4、【构造函数执行独有】代码执行完成,把之前创建的堆内存地址返回(浏览器默认返回)

也就是开始创建的对象其实就是当前Fn这个类的一个实例,我们让this指向这个实例,代码执行中的this.xxx=xxx都是给实例设置“私有属性”,最后浏览器会把默认创建的实例返回,供外面接受。

构造函数中的细节问题 构造函数执行,不写return,浏览器默认返回创建的实例,但是如果我们自己写了return? 1、return是一个基本值,返回的结果依然是类的实例,没有受影响 2、如果返回的是引用值,则会把默认返回的实例覆盖,此时接收到的结果就不在是当前类的实例了

构造函数执行的时候,尽量减少return的使用,防止覆盖实例