视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
js封装_new函数以及实现new关键字的方法(附代码测试)
2020-11-27 19:32:28 责编:小采
文档
 本篇文章给大家带来的内容是关于js封装_new函数以及实现new关键字的方法(附代码测试),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、前言

众所周知:没有对象怎么办?那就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关键字完全一致。

下载本文
显示全文
专题