源码时代前端干货分享|new关键字底层原理-执行过程

你的名字 2023-06-30 06:45 18阅读 0赞

## 构造对象关键字：new ##

众所周知，js是用new来产生对象的，那么今天我们就来说说js里new产生对象的构造原理。

//人类构造函数  
function People()\{

\}  
People.prototype.index = 1; //在原型上绑定一个index属性，值为1

var p1 = new People(); //我们都知道使用new可以产生一个对象，但是到底是怎么产生出来的对象，想必很多同学都不清楚

我们都知道，new在js里可以产生一个对象，但是它到底是怎么产生的对象呢？现在我们就来探秘new的底层原理  
每当我们使用new产生对象的时候，底层进行了很多操作，简单描述可分为以下2步

1.  实例化一个空对象（Object），继承构造函数的原型（prototype）
2.  已当前Object为上下文，执行new后面的函数，并改变this指向  
    分步解析  
    new People() = \{

//1 var obj = new Object();

//2 obj.**proto**= People.prototype;

//3 People.call(obj);

\}  
（1）第1行：创建一个空对象obj;  
（2）第2行：把obj的proto指向People的原型对象prototype  
（3）第3行：在当前对象上下文内执行People函数，并改变this指向，指向此对象本身  
那么属性是在什么时候绑定上去的呢？我们可以看到People原型的index属性并没有赋值过给obj，但是为什么obj有index这个属性呢？  
function People()\{

\}  
People.prototype.index = 1;

var p1 = new People();  
console.log(p1.index); //打印1  
其实，当我们把obj的proto指向People的原型对象时，就产生了obj的原型链  
obj -> People.prototype -> Object.prototype -> null  
当我们在找obj.index属性时，它会先找自身的index属性，如果找不到，则会顺着原型链向上找，这时会找到People.prototype.index，所以最后打印1。  
如果在People的原型上也找不到，那么它会继续往上去找，直到最后找到null。  
function People()\{

\}  
People.address = "ChengDu";  
People.prototype.index = 1;

var p1 = new People();  
console.log(p1.index); //1  
console.log(p1.address); //undefined  
为什么address属性获取不到呢？仔细看，People这个构造函数其实并不在原型链上，address属性绑定的实在People函数本身，而没有在People.prototype上！  
如果你能看理解上面的代码，说明你已经对这块已经比较熟了，那么我们再往下看！  
1 function People()\{  
2  
3 \}  
4 People.prototype.index = 1;  
5 var p1 = new People();  
6 People.prototype.index = 20;  
7 console.log(p1.index); //现在p1.index等于多少呢?1还是20?  
如果你的答案是20，你已经掌握了刚才的内容。  
(1) 第5行，产生p1  
(2) 第6行，修改People原型的index属性，index现在变为了20  
(3）第7行，访问p1.index，p1因为没有index属性，所以顺着原型链找到People.prototype.index，打印20

我们再来看一个变形示例  
1 function People()\{  
2  
3 \}  
4 People.prototype.index = 1;  
5 var p1 = new People();  
6 p1.index = 30;  
7 console.log(p1.index); //现在p1.index是多少?  
8 console.log(People.prototype.index) //1还是30?  
答案，p1.index = 30; People.prototype.index = 1;  
如果你已经正确！恭喜，你已经熟练掌握本章内容，可以跳过以下部分！

(1) 第5行，产生p1  
(2) 第6行，给p1绑定index属性，并赋值30  
(3）第7行，访问p1.index，找属性时，会优先找自己身上，如果没有，才会顺着原型链向上找，此时自身已有index属性，所以打印30  
(4) 第8行，访问People.prototype.index，因为People原型的index属性并没被修改过，所以打印的值还是1  
看到这里，对new的底层执行过程总算弄明白了吧！