原生JS封装_new函数实现new关键字的功能


Posted in Javascript onAugust 12, 2018

一.前言

众所周知:没有对象怎么办?那就new一个!

那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢?
现在我们就来剖析一下原生JS中new关键字内部的工作原理。

二.原始的new

首先,我们先new一个对象看看:

//创建Person构造函数,参数为name,age
 function Person(name,age){
 this.name = name;
 
this.age = age;
  }
 //实例化对象小明
 xm = new Person('xiaoming',18);
 //打印实例化出来的对象小明
 console.log(xm);

打印结果:

原生JS封装_new函数实现new关键字的功能

原生JS封装_new函数实现new关键字的功能

从打印结果中可以看到:

用new关键字实例化对象时,首先创建了一个空对象xm,并且这个空对象包含两个属性name和age,分别对应构造函数中的两个属性,其次我们也可以知道实例化出来的这个对象xm是继承自Person.prototype,那么现在我们就可以总结出new关键字在实例化对象时内部都干了什么,其实,new关键字内部干了如下三件事(已知构造函数为Func):

1.创建一个空对象,并使该空对象继承Func.prototype;

2.执行构造函数,并将this指向刚刚创建的新对象;

3.返回新对象;

三.封装_new函数

当我们知道new关键字的内部原理后,我们就可以封装一个_new函数,使其用于与new关键字同样的功能。

_new函数需要传入以下几个参数:

第一个参数:构造函数名Func;

第二个参数及后面的参数:构造函数的参数

function _new(){
//1.拿到传入的参数中的第一个参数,即构造函数名Func
   var Func = [].shift.call(arguments);
 
//2.创建一个空对象obj,并让其继承Func.prototype
 
var obj = Object.create(Func.prototype);
 
//3.执行构造函数,并将this指向创建的空对象obj
 
Func.apply(obj,arguments)
 
//4.返回创建的对象obj
 
return obj
 }

四.测试_new函数

封装好后,我们来测试一下封装的_new函数,看看它是否实现了和原生new关键字同样的功能。

//创建Person构造函数,参数为name,age
 function Person(name,age){
 this.name = name;
 
this.age = age;
 } 
 function _new(){
 
//1.拿到传入的参数中的第一个参数,即构造函数名Func
 
var Func = [].shift.call(arguments);
 
//2.创建一个空对象obj,并让其继承Func.prototype
 
var obj = Object.create(Func.prototype);
 
//3.执行构造函数,并将this指向创建的空对象obj
 
Func.apply(obj,arguments)
 
//4.返回创建的对象obj
 
return obj
 }
 xm = _new(Person,'xiaoming',18);
 console.log(xm);

测试结果:

原生JS封装_new函数实现new关键字的功能

原生JS封装_new函数实现new关键字的功能

从测试结果看到,_new函数的功能与new关键字完全一致。

总结

以上所述是小编给大家介绍的原生JS封装_new函数实现new关键字的功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
js数组的操作指南
Dec 28 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 Javascript
微信小程序实现简单的select下拉框
Nov 23 Javascript
axios向后台传递数组作为参数的方法
Aug 11 #Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 #Javascript
axios的拦截请求与响应方法
Aug 11 #Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 #Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 #Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 #Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 #Javascript
You might like
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
Javascript缓存API
2016/06/14 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
JavaScript中Object值合并方法详解
2017/12/22 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
Python中的pprint折腾记
2015/01/21 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
Python遍历pandas数据方法总结
2018/02/09 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
应届医学毕业生求职信分享
2013/12/02 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
小学三年级作文之写景
2019/11/05 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python
python脚本框架webpy模板赋值实现
2021/11/20 Python
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫