原生JS封装_new函数实现new关键字的功能
作者:难凉热血,前端菜鸡! 发布时间:2023-09-05 00:44:27
一.前言
众所周知:没有对象怎么办?那就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);
打印结果:
从打印结果中可以看到:
用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);
测试结果:
从测试结果看到,_new函数的功能与new关键字完全一致。
总结
以上所述是小编给大家介绍的原生JS封装_new函数实现new关键字的功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
来源:https://www.cnblogs.com/wangjiachen666/archive/2018/08/12/9461768.html
猜你喜欢
- 在XHTML标签中有一些标签的作用是相似的,当然这里的相似是指语义相似,以至于很多人都不清楚这些相似的标签如何使用,那么今天的主题就是分解相
- 如果需要在查询语句返回的列中包含一列表示该条记录在整个结果集中的行号, ISO SQL:2003 标准提出的方法是提供 ROW_NUMBER
- using System; using System.Collections; using System.Configuration; us
- 遇到一个很奇怪的现象,在给页面添加“打印”按钮时,发现网页在IE6下居然不能打印,弹出一个对话框,遇到脚本错误。查看错误详细:定位到 url
- function f(x){ alert(x); return
- documentFragment 是一個無父對象的document對象.他支持以下DOM2方法:appendChild, cloneNode
- 长话短说,看这个 form 元素:<form method="post" action=&qu
- 前言我们在写应用时,基本都会用到配置文件,从各种 shell 到 nginx 等,都有自己的配置文件。虽然这没有太多难度,但是配置项一般相对
- hasOwnPropertyhasOwnProperty是javascript中用于检测对象是否包含某个属性的方法,返回一个布尔值。var
- 感觉这个东西很常用,很多其它js框架里有,但是太大了,用不了太多,自己写了个。需要的朋友可以参考下。下面是html测试代码:<!DOC
- 本文实例讲述了python使用Flask框架获取用户IP地址的方法。分享给大家供大家参考。具体如下:下面的代码包含了html页面和pytho
- 如果仅仅是定义表格的边框为1(border="1")和边框颜色值(如borderC
- MySQL数据库线程缓冲池的相关知识是本文我们主要要介绍的内容,MySQL数据库支持线程缓存,在多线程连接模式下,如果连接断开后,将这个线程
- ASP,一种最先广泛的流行在WEB行业的编程语言。严格的说,ASP还算不上的编程语言。不过,因为微软的大力支持,ASP这一路,走得非常顺利。
- 表一、运算符与特殊字符 运算符描述/选择子元素,返回左侧元素的直接子元素;如果"/"位于最左侧表示选择根结点的直接子元素
- 数据库系统的安全性包括很多方面。由于很多情况下,数据库服务器容许客户机从网络上连接,因此客户机连接的安全对MySQL数据库安全有很重要的影响
- <style> #L { position:absolute; color:
- 前言因为NLP作业需要用到kenlm,而kenlm在linux下更为方便。本人win10之前开启了子系统,所以就打算在子系统下进行相关作业的
- 【原文地址】 Fixes for Common VS 2008 and .NET 3.5 Beta2 Issu
- 如何用组件实现自动发送电子邮件?我想做一个能够自动发送电子邮件的程序,该如何做? 这就要用到w3 upl