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

Posted IT-source

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了源码时代前端干货分享|new关键字底层原理-执行过程相关的知识,希望对你有一定的参考价值。

构造对象关键字: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的底层执行过程总算弄明白了吧!

以上是关于源码时代前端干货分享|new关键字底层原理-执行过程的主要内容,如果未能解决你的问题,请参考以下文章

源码时代软件测试干货分享|Python自动化测试常见面试题,学会不怕找不到好工作!

源码时代前端干货分享| JavaScript编程优化,超强入门必备技能!

源码时代前端干货分享|swoole开启后无法访问问题

源码时代前端干货分享|从零动手封装一个通用的vue按钮组件

源码时代Java干货分享|带你了解原型模式_prototype

源码时代前端干货分享| threejs 开发使用插件Gui.js与three.js引擎如何联合使用