持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第15天,点击查看活动详情
引言
在工作室学习的时候,组长过来灵魂拷问
组长:前端创建类的方式有几种?
我:直接new一个.
组长:还有呢?new一个对象的时候中间发生了什么事情?
我:......
经过我的一番学习,知道了 new 一个对象的时候中间发生了什么.
接下来我们就来解析一下 new 一个对象的时候中间发生了什么吧。
原理
发生的事情大概可以分成这四步:
- 创建一个新的空对象
- 设置这个新的对象的内部、可访问性和
[[prototype]]属性为构造函数(指prototype.construtor所指向的构造函数)中设置的; - 执行构造函数,当
this关键字被提及的时候,使用新创建的对象的属性; 返回新创建的对象(除非构造方法中返回的是‘无原型’)。 - 如果构造函数有返回一个对象,则返回这个对象,否则返回新创建的那个对象。
实验
大家都曾听过读万卷书,行万里路的道理,对于代码开发我们应该更是如此,话不多说,我们直接上实验来理解这个。
看看下面的代码
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的调用,结果如下
还是老规矩,我们使用脱离浏览器的node.js来执行我们的js文件。
结果如上
new通过构造函数GoWhere创建出来的实例可以访问到构造函数中的属性new通过构造函数GoWhere创建出来的实例可以访问到构造函数原型链中的属性,也就是说通过new操作符,实例与构造函数通过原型链连接了起来
最终实现效果。