详解Javascript中new()到底做了些什么?


Posted in Javascript onMarch 29, 2018

前言

和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象。 但在 javascript 中,万物皆对象,为什么还要通过 new 来产生对象? 本文将带你一起来探索 javascript 中 new 的奥秘...

要创建 Person 的新实例,必须使用 new 操作符。

以这种方式调用构造函数实际上会经历以下 4个步骤:

(1) 创建一个新对象;

(2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象) ;

(3) 执行构造函数中的代码(为这个新对象添加属性) ;

(4) 返回新对象。

 new 操作符

在有上面的基础概念的介绍之后,在加上new操作符,我们就能完成传统面向对象的class + new的方式创建对象,在JavaScript中,我们将这类方式成为Pseudoclassical。

基于上面的例子,我们执行如下代码

var obj = new Base();

这样代码的结果是什么,我们在Javascript引擎中看到的对象模型是:

详解Javascript中new()到底做了些什么?

new操作符具体干了什么呢?其实很简单,就干了三件事情。

var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

第一行,我们创建了一个空对象obj

第二行,我们将这个空对象的__proto__成员指向了Base函数对象prototype成员对象

第三行,我们将Base函数对象的this指针替换成obj,然后再调用Base函数,于是我们就给obj对象赋值了一个id成员变量,这个成员变量的值是”base”,关于call函数的用法。

如果我们给Base.prototype的对象添加一些函数会有什么效果呢?

例如代码如下:

Base.prototype.toString = function() {
 return this.id;
}

那么当我们使用new创建一个新对象的时候,根据__proto__的特性,toString这个方法也可以做新对象的方法被访问到。于是我们看到了:

构造子中,我们来设置‘类'的成员变量(例如:例子中的id),构造子对象prototype中我们来设置‘类'的公共方法。于是通过函数对象和Javascript特有的__proto__与prototype成员及new操作符,模拟出类和类实例化的效果。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
js查错流程归纳
May 04 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
js实现验证码功能
Jul 24 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 #Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 #Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 #Javascript
利用js实现前后台传送Json的示例代码
Mar 29 #Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 #Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 #Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 #Javascript
You might like
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
java中两个byte数组实现合并的示例
2018/05/09 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
电大毕业自我鉴定
2014/02/03 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
关于诚信的活动方案
2014/08/18 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
投资意向协议书
2015/01/29 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL