您的位置:首页 > Web前端 > JavaScript

js中new操作符原理解析

2021-08-12 00:25 1061 查看

js中使用new操作符时,到底做了哪些事情?

在js中,我们经常会用到 new 操作符,当我们对构造函数使用new操作符时,具体做了哪些事情呢?

它会完成以下四个步骤:

1.创建一个空的对象

2.设置原型链:将新对象的constructor属性设置为构造函数信息,设置新对象的__proto__属性指向构造函数的prototype对象

3.让构造函数中的this指向新对象,并执行构造函数的函数体

4.判断构造函数的返回值类型,将初始化完成的对象地址,保存到等号左边的变量中

 

结合代码分析:

var Func = function() {

  ...

}

var func = new Func()

 

我们来具体分析:

new一共经历了4个阶段:

  1.创建一个空对象

  var obj = {}

  2.设置原型链

  obj.__proto__ = Func.prototype

  3.让Func中的 this 指向 obj,并执行Func的函数体。(因为创建新的对象后,构造函数的作用域赋给了新对象,所以 this 指向了新对象)

  var res = Func.call(obj)

  4.判断Func的返回值类型

    如果是基本数据类型,则返回obj,如果是引用数据类型,则返回引用类型的对象

    if (typeof(res)=== "object"){

      func = res

    }else {

      func = obj

    }

注意:在构造函数没有返回值的情况下,返回新创建的对象;

    如果构造函数有返回值res,那么就要判断值的类型:

      返回值res为基本数据类型(string、number、null、undefined、boolean、symbol),那么返回新创建的对象。

      返回值res为引用数据类型时,函数的返回值res才为指定对象,此时返回res。

 

结合实例我们来看一下:

  构造函数没有返回值的情况:

  

 

  构造函数返回值为基本数据类型的情况:

  

  构造函数返回值为引用数据类型的情况:

  

 

由Person {name : "Sunwukong"} 和 {name : "Zhubajie"}

  可以看出,当返回值是引用类型时,则使用 return 的对象,此时 new 操作也失效了。

 

 

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: