原生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 style 中visibility和display之间的区别
Jan 22 Javascript
Javascript事件热键兼容ie|firefox
Dec 30 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 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
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
js 字符串操作函数
2009/07/25 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
详解vuex的简单使用
2018/03/12 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
python实现统计代码行数的方法
2015/05/22 Python
Python之用户输入的实例
2018/06/22 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
pytest中文文档之编写断言
2019/09/12 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
入党积极分子介绍信
2014/01/17 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
个人授权委托书范文
2014/09/21 职场文书
化验员岗位职责
2015/02/14 职场文书
Python绘画好看的星空图
2022/03/17 Python