详解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 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
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
php str_pad 函数使用详解
2009/01/13 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
python编写分类决策树的代码
2017/12/21 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
中文专业学生自我评价范文
2014/02/06 职场文书
火锅店营销方案
2014/02/26 职场文书
求职意向书范文
2014/04/01 职场文书
客户经理岗位职责
2015/01/31 职场文书