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

IT-source IT-source     2023-02-26     323

关键词:

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

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

一、按强类型风格定义变量大家要知道js是一种弱类型语言,定义变量的时候不要太随意,大多数初学者定义变量时,只是声明变量而没有赋值,这样就显得太随意了声明变量的时候,一定要指明变量的类型,告诉解析器,你要... 查看详情

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

首先说一下环境,由于swoole只能在linux环境中使用,开发者通常使用的windows系统,所以我的swoole是安装在Cygwin环境中的。Cygwin可以在windows系统中运行,提供一个类似linux命令行的环境。同时,也虚拟机不同ÿ... 查看详情

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

我们在使用目前最主流的前端框架vue在开发过程中,组件是一个非常重要的组成部分,可以这么说,所有的vue应用,都是由一个一个的小组件拼装而成的。正是由于vue组件如此重要,所以vue的生态中,也非常多的UI组件库,其中... 查看详情

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

原型模式概述在java中创建一个对象通过new是非常繁琐的,需要创建检查权限,做一些数据准备等等,因此也会销毁系统性能,那么想要快快速简单的创建出对象,我们可以通过原型模式实现,以某个对象... 查看详情

源码时代java干货分享|手把手教你用maven构建docker镜像

一、原理分析由于我们开发pc上面没有docker,所以没办法直接打包镜像,所以要调用远程主机docker进行。并且远程主机docker默认不支持远程访问,所以需要开启远程。然后我们在项目中以dockermaven插件方式进行打包镜... 查看详情

源码时代java干货分享|springsecurity快速上手秘籍(代码片段)

前言至今Java能够如此的火爆Spring做出了很大的贡献,它的出现让Java程序的编写更为简单灵活,而Spring如今也形成了自己的生态圈,今天咱们探讨的是Spring旗下的一个款认证工具:SpringSecurity,如今认证框架主流“sh... 查看详情

源码时代ui干货分享|axure基础教程

主界面介绍知识重点一、页面的切换热区:就是可做交互的区域。动态面板:多种状态,可以反复切换。第一步:鼠标选择热区,鼠标左键拖拽到画布中,调整到合适位置,合适大小第二步:在图... 查看详情

源码时代软测干货分享|探索语境驱动测试七大原则

探索式测试的奠基人和积极实践者cemKaner和JamesBach都支持语境驱动测试。语境驱动测试的7条基本原则对于正确理解并应用探索式测试具有重要意义,本文将予以简单讨论。 原则1:任何实践的价值都取决于其语境(Con... 查看详情

源码时代软测干货分享|带你了解cgi支持模块

该模块定义了许多由Python编写的CGI脚本使用的实用程序。 21.2.1。介绍HTTP服务器调用CGI脚本,通常用于处理通过HTML<FORM>或<ISINDEX>元素提交的用户输入。 通常,CGI脚本存在于服务器的特殊cgi-bin目录中。HTTP服务器... 查看详情

源码时代java干货分享|带你认识zookeeper分布式服务框架

本质它是一个分布式服务框架,是ApacheHadoop的一个子项目提供一种集中式信息存储服务,用于解决分布式应用中的一些数据管理问题简单来说zookeeper=文件系统+监听通知机制。特点数据存在内存中类似文件系统的树... 查看详情

mybatis——源码解析mybatis框架底层的执行原理(代码片段)

文章目录:1.前言2.案例项目源码3.MyBatis源码解析底层执行原理3.1读取mybatis配置文件创建出SqlSeesionFactory对象3.2通过SqlSeesionFactory对象进而创建出SqlSession对象3.3通过SqlSession的getMapper获取到接口代理对象3.4通过mapper接口的代理... 查看详情

源码时代软测干货分享|jmeter性能测试实战(上)(代码片段)

确认被测项目的性能指标1.1性能测试指标性能测试指标,是性能测试中重要的测试依据,相当于测试用例中的预期结果,由于性能测试属于非功能性测试,在规范的项目中有专门的非功能性需求,但是在互联网高速发展的今天,为了早一... 查看详情

源码时代软测干货分享|今天来说说测试转向敏捷路线

尽管跳上敏捷的潮流对企业来说很有诱惑力,但这并不总是那么容易,向敏捷的转变很可能伴随着的是测试方面的一系列挑战。为了使敏捷能够快速交付高质量的产品,测试必须比以往更早地开始介入。 今天,... 查看详情

源码时代java干货分享|手把手教你springboot配置ssl证书(代码片段)

图说明第一步首先去阿里云弄一个免费的SSL证书下载然后放到项目里面的resource路径下这里一定要注意是key-store和key-store-password我在配置时写出了key-password弄了很久没找到原因换成了nginx去配置,最近还是嫌弃服务启动太多改... 查看详情

finally关键字执行的底层原理

1.举例子:在主方法中调用m1方法,finally中i变量自增,但结果却是10publicstaticvoidmain(String[]args){inti=m1();System.out.println(i);//10}publicstaticintm1(){inti=10;try{returni;}finally{i++;System.out.println("m1的i="+i);//11}} 查看详情

ios底层原理+逆向文章汇总

iOS底层原理objc4源码相关0、底层源码探索方式iOS-底层原理01:源码探索的三种方式1、对象底层:结构体+alloc分析iOS-底层原理02:alloc&init&new源码分析iOS-底层原理03:objc4-781源码编译&调试iOS-底层原理04&#... 查看详情

mybatis——源码解析mybatis框架底层的执行原理(代码片段)

文章目录:1.前言2.案例项目源码3.MyBatis源码解析底层执行原理3.1读取mybatis配置文件创建出SqlSeesionFactory对象3.2通过SqlSeesionFactory对象进而创建出SqlSession对象3.3通过SqlSession的getMapper获取到接口代理对象3.4通过mapper接口的代理... 查看详情

mybatis——源码解析mybatis框架底层的执行原理(代码片段)

文章目录:1.前言2.案例项目源码3.MyBatis源码解析底层执行原理3.1读取mybatis配置文件创建出SqlSeesionFactory对象3.2通过SqlSeesionFactory对象进而创建出SqlSession对象3.3通过SqlSession的getMapper获取到接口代理对象3.4通过mapper接口的代理... 查看详情