js new一个对象的中间发生了什么

128 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第15天,点击查看活动详情

引言

在工作室学习的时候,组长过来灵魂拷问

组长:前端创建类的方式有几种?

我:直接new一个.

组长:还有呢?new一个对象的时候中间发生了什么事情?

我:......

经过我的一番学习,知道了 new 一个对象的时候中间发生了什么.

接下来我们就来解析一下 new 一个对象的时候中间发生了什么吧。

原理

发生的事情大概可以分成这四步:

  1. 创建一个新的空对象
  2. 设置这个新的对象的内部、可访问性和[[prototype]]属性为构造函数(指prototype.construtor所指向的构造函数)中设置的;
  3. 执行构造函数,当this关键字被提及的时候,使用新创建的对象的属性; 返回新创建的对象(除非构造方法中返回的是‘无原型’)。
  4. 如果构造函数有返回一个对象,则返回这个对象,否则返回新创建的那个对象。

实验

大家都曾听过读万卷书,行万里路的道理,对于代码开发我们应该更是如此,话不多说,我们直接上实验来理解这个。

看看下面的代码

function GoWhere(place) {

    console.log('这是constructor');

    this.place = place;

}

  
GoWhere.prototype.go = function() {

    console.log(`place is ${this.place}`);

}

  
let g = new GoWhere('BeiJing');

g.go();

这里我首先定义了Gowhere的构造,然后为this.place传入place

然后我通过他的prototype属性来为他加了一个go的调用,结果如下

image.png

还是老规矩,我们使用脱离浏览器的node.js来执行我们的js文件。

结果如上

  • new 通过构造函数 GoWhere 创建出来的实例可以访问到构造函数中的属性
  • new 通过构造函数 GoWhere 创建出来的实例可以访问到构造函数原型链中的属性,也就是说通过 new 操作符,实例与构造函数通过原型链连接了起来

最终实现效果。