原生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 相关文章推荐
JavaScript 10件让人费解的事情
Feb 15 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
vue.js语法及常用指令
Oct 29 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
原生JS实现多条件筛选
Aug 19 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
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
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
我的论坛源代码(五)
2006/10/09 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
用JQuery调用Session的实现代码
2010/10/29 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
Vue实现table上下移动功能示例
2019/02/21 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
python with statement 进行文件操作指南
2014/08/22 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Django在win10下的安装并创建工程
2017/11/20 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Python常用特殊方法实例总结
2019/03/22 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
python实现局域网内实时通信代码
2019/12/22 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
巴西购物网站:Submarino
2020/01/19 全球购物
为什么要有struct关键字
2012/05/08 面试题
介绍一下sql server的安全性
2014/08/10 面试题
总结表彰大会主持词
2014/03/26 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
python3操作redis实现List列表实例
2021/08/04 Python