浅析JS中NEW的实现原理及重写

提到new，肯定会和类和实例联系起来，如：

function Func() {
 let x = 100;
 this.num = x +
}
let f = new Func();

上面的代码，我们首先创建了一个函数，如果是用面向对象的说法就是创建了一个Function类的实例，如果直接执行这个函数，那它就是一个普通的函数，如果用new执行，则这个函数被称为一个自定义的类。

如果是一个普通函数执行，他会如下做几件事：

　　·形成一个全新的执行上下文EC(Execution Context 执行环境)

　　·形成一个AO(Activation Object 活动对象)变量对象，初始化arguments和形参赋值

　　·初始化作用域链

　　·代码执行

如果是new函数执行，它既有普通函数执行的一面，也有自己独有的东西：

　　·默认创建一个对象，而这个对象就是当前类的实例

　　·声明其this指向，让其指向这个新创建的实例

　　·不论其是否写return，都会把新创建的实例返回，这里有个特殊点，如果用户自己返回内容，且返回的是一个引用类型值，则会把默认返回的实例给覆盖掉，此时返回的值就不再是类的实例了

console.log(f); //=>{num:200}
//f是Func这个类的实例
//相当于给创建的实例对象新增一个num的属性 obj.num=200 （因为具备普通函数执行的一面，所以只有this.xxx=xxx才和创建的实例有关系，此案例中的x只是AO中的私有变量）
console.log(f instanceof Func); //=>TRUE instanceof用来检测某一个实例是否属于这个类

每一次new出来的都是一个新的实例对象

console.log(f === f2); //=>false

既然知道了new都做了什么事情，我们重新一下new：

/*
 * 内置NEW的实现原理
 * @params
 *  Func：操作的那个类
 *  ARGS：NEW类的时候传递的实参集合
 * @return
 *  实例或者自己返回的对象
 */
function _new(Func, ...args) {
  //默认创建一个实例对象（而且是属于当前这个类的一个实例）
  let obj = {};

  //也会把类当做普通函数执行
  //执行的时候要保证函数中的this指向创建的实例
  let result = Func.call(obj, ...args);

  //若客户自己返回引用值，则以自己返回的为主，否则返回创建的实例
  if ((result !== null && typeof result === "object") || (typeof result === "function")) {
    return result;
  }
  return obj;
}

我们试一下：

let f3 = _new(Func);
console.log(f3); // =>{num: 200}

我们继续测试：

Func.prototype.log = function () {
  console.log('ok');
}
let f4 = _new(Func);
f4.log(); //=>Uncaught TypeError: f4.log is not a function

也就是说，Func原型上的方法其实例没法调用，我们还需要修改：

/*
 * 内置NEW的实现原理
 * @params
 *  Func：操作的那个类
 *  ARGS：NEW类的时候传递的实参集合
 * @return
 *  实例或者自己返回的对象
 */
function _new(Func, ...args) {
  //默认创建一个实例对象（而且是属于当前这个类的一个实例）
  // let obj = {};
  let obj = Object.create(Func.prototype);

  //也会把类当做普通函数执行
  //执行的时候要保证函数中的this指向创建的实例
  let result = Func.call(obj, ...args);

  //若客户自己返回引用值，则以自己返回的为主，否则返回创建的实例
  if ((result !== null && typeof result === "object") || (typeof result === "function")) {
    return result;
  }
  return obj;
}

这样应该就可以了。

let f6 = _new(Func);
f6.log(); //=>ok

总结

以上所述是小编给大家介绍的JS中NEW的实现原理及重写，希望对大家有所帮助，也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • javascript重写alert方法的实例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • js toFixed()方法的重写实现精度的统一

    但凡用过js 中的toFix() 方法的, 应该都知道这个方法存在一个小小的BUG. 在IE 下和FF 下对于小数的进位有点不同. 例如( 0.005)在ie 下 toFix(2)=0.00. 在FF 下 toFix(2)=0.01. 这样就会造成数据的差异. 我们可以通过 重写 这个方法来实现精度的统一. 复制代码 代码如下: Number.prototype.toFixed = function(s) { return (parseInt(this * Math.pow( 10, s ) +

  • 在JavaScript中重写jQuery对象的方法实例教程

    jQuery是一个款非常优秀的类库,它给我们解决了很多的客户端编程,但是任何东西都不是万能的,当它不能满足我们的需求时我们就需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:比如我现在的web应用程序大多数时候的数据交互都是通过Ajax来完成的,这样就可以将一些隐藏字段的数据保存在HTML标签的属性中,使HTML标签的代码量减少,如:ID,Timestamp等等,这些不需要用户输入但又不得不提交的字段,通过表单提交的做法是 <input name="ID" val

  • js重写alert控件(适合学习js的新手朋友)

    纯粹是为了打发时间,手写了一个JS的 alert控件. 代码如下: <html> <head> <script type="text/javascript"> var alertObj = new Object(); var generalStyle = { zIndex: 0, width: "200px", height: "100px", border: "thick solid #CCCCCC

  • 利用JS重写Cognos右键菜单的实现代码

    利用JS重写Cognos右键菜单的实现代码

    复制代码 代码如下: <!--菜单样式--> <STYLE type=text/css> .cMenu { BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 14px; VISIBILITY: hidden; BORDER-LEFT: #000000 1px solid; WIDTH: 150px; CURSOR: default; COLO

  • js怎么覆盖原有方法实现重写

    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script> function myblur () { alert("1.离开"); } function bindEvent(func){ myblur = func; } function myonclick() { bin

  • 重写javascript中window.confirm的行为

    重写javascript中window.confirm的行为

    javascript中window.confirm这个方法很好用,可以弹出一个确认对话框我们之所以弹出这个对话框,可能就是因为该操作很危险,所以要用户确认.但如果默认选择"确定",则可能违背了这个原则. 另外,confirm对话框的按钮都是固定在"确定"和"取消"这两个.可能有些时候也不是很直观. 所以,可以考虑用vbscript中的msgbox来改写这个行为.下面是一个范例 复制代码 代码如下: <%@ Page Language=&qu

  • 浅析JS中NEW的实现原理及重写

    提到new,肯定会和类和实例联系起来,如: function Func() { let x = 100; this.num = x + } let f = new Func(); 上面的代码,我们首先创建了一个函数,如果是用面向对象的说法就是创建了一个Function类的实例,如果直接执行这个函数,那它就是一个普通的函数,如果用new执行,则这个函数被称为一个自定义的类. 如果是一个普通函数执行,他会如下做几件事: ·形成一个全新的执行上下文EC(Execution Context 执行环境)

  • Vue.js中的computed工作原理

    JS属性: JavaScript有一个特性是 Object.defineProperty ,它能做很多事,但我在这篇文章只专注于这个方法中的一个: var person = {}; Object.defineProperty (person, 'age', { get: function () { console.log ("Getting the age"); return 25; } }); console.log ("The age is ", person.

  • 浅析JS中常用类型转换及运算符表达式

    JS中的常用类型转换(一般用强制转换): 1.强制转为整数:parseInt:写法:x = parseInt(x); 2.强制转换位小为:parseFloat:写法:x = parseFloat(x); 3.检测类型:x = parseInt(x);       alert(typeof(true)); JS中常用的运算符表达式: 1.逻辑运算符(布尔型):&& 并 :|| 或 :! 非 : 2.比较运算符:==(等于) :!=(不等于) : > :< :>=(大于等于)

  • 浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结

    1.map 有返回值,返回一个新的数组,每个元素为调用func的结果. let list = [1, 2, 3, 4, 5]; let other = list.map((d, i) => { return d * 2; }); console.log(other); // print: [2, 4, 6, 8, 10] 2.filter 有返回值,返回一个符合func条件的元素数组 let list = [1, 2, 3, 4, 5]; let other = list.filter((d,

  • Node.Js中实现端口重用原理详解

    本文介绍了Node.Js中实现端口重用原理详解,分享给大家,具体如下: 起源,从官方实例中看多进程共用端口 const cluster = require('cluster'); const http = require('http'); const numCPUs = require('os').cpus().length; if (cluster.isMaster) { console.log(`Master ${process.pid} is running`); for (let i =

  • node.js中Buffer缓冲器的原理与使用方法分析

    本文实例讲述了node.js中Buffer缓冲器的原理与使用方法.分享给大家供大家参考,具体如下: 一.什么是Buffer Buffer缓冲器是用来存储输入和输出数据的一段内存.js语言没有二进制数据类型,在处理TCP和文件流的时候,就不是很方便了. 所以node.js提供了Buffer类来处理二进制数据,Buffer类是一个全局变量,Buffer在创建的时候大小就固定了,无法改变. Buffer类的实例类似于由字节元素组成的数组,可以有效的表示二进制数据. 二.什么是字节 字节是计算机存储时的

  • 浅析js中事件冒泡与事件捕获

    目录 01-事件冒泡 1.1-事件冒泡介绍 1.2-事件冒泡利用(事件委托) 1.3-事件冒泡影响 与 阻止事件冒泡 02-事件捕获 1.1-事件捕获介绍 1.2-事件三个阶段 01-事件冒泡 1.1-事件冒泡介绍 本小节知识点:介绍什么是事件冒泡 事件冒泡:如果一个元素的事件被触发,那么他的所有父级元素的同名事件也会被依次触发 元素->父元素->body->html->document->window 事件冒泡一直存在,只不过以前我们没有给父级元素加同名事件 <!DO

  • 深入浅析js中的正则表达式

    阅读目录 正则表达式的创建 正则表达式中的特殊字符 \ (反斜杠) ^ $ *,  +,  .(小数点) ? (问号) (x) (?:x) x(?=y), x(?!y), x|y {n}, {n,m}: [xyz], [^xyz] 其他 正则表达式标志 正则表达式使用 很多时候多会被正则表达式搞的晕头转向,最近抽出时间对正则表达式进行了系统的学习,整理如下: 正则表达式的创建 两种方法,一种是直接写,由包含在斜杠之间的模式组成:另一种是调用RegExp对象的构造函数. 两种方法的创建代码如下:

  • 深入浅析C#中单点登录的原理和使用

    深入浅析C#中单点登录的原理和使用

    什么是单点登录? 我想肯定有一部分人"望文生义"的认为单点登录就是一个用户只能在一处登录,其实这是错误的理解(我记得我第一次也是这么理解的). 单点登录指的是多个子系统只需要登录一个,其他系统不需要登录了(一个浏览器内).一个子系统退出,其他子系统也全部是退出状态. 如果你还是不明白,我们举个实际的例子把.比如我们首页:https://www.jb51.ne ,和我们的搜索http://so.jb51.net .这就是两个系统(不同的域名).如果你登录其中一个,另一个也是登录状态.如果

  • 浅析JS中对函数function的理解(基础篇)

    正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定义方式(见下文)之外,还有一种定义的方式能更直观的体现出这个概念: var sum = new Function("num1", "num2", "return num1 + num2"); //不推荐 Function的构造函数可以接收任意数量的参

随机推荐