原生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 相关文章推荐
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
react 生命周期实例分析
May 18 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
德劲1107的电路分析与打磨
2021/03/02 无线电
php实现斐波那契数列的简单写法
2014/07/19 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
解决python 输出是省略号的问题
2018/04/19 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
python动态进度条的实现代码
2019/07/03 Python
Python 实现try重新执行
2019/12/21 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
python异步Web框架sanic的实现
2020/04/27 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
三关爱志愿服务活动方案
2014/08/17 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
工作失误检讨书
2015/01/26 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
Minikube搭建Kubernetes集群
2022/03/31 Servers