JS中NEW的实现原理及重写的方法

javascript中new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。本文就来为大家介绍一下new的实现原理及重写的方法。

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教程 栏目,欢迎学习!

以上就是JS中NEW的实现原理及重写的方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2749957.html

(0)
上一篇 2025年3月8日 05:28:24
下一篇 2025年3月8日 05:28:34

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 在Javascript中详细解读作用域及块级作用域区别

    作用域永远都是任何一门编程语言中的重中之重,因为它控制着变量与参数的可见性与生命周期。下面给大家介绍javascript中的作用域及块级作用域,需要的朋友参考下吧 一、块级作用域的说明 在学习JavaScript的变量作用域之前,我们应当明…

    编程技术 2025年3月8日
    200
  • 使用js如何实现上下滚动公告

    这篇文章主要给大家介绍了关于利用10行js代码实现滚动公告效果的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧。 需求 在最近的项目中需要实现公告栏滚动显示效果如下…

    2025年3月8日
    200
  • 在js中如何实现关闭网页出现离开提示(详细教程)

    本篇文章主要给大家带来一个js实用功能,监听浏览器在关闭的时候提示出是否要离开的小功能,需要的朋友学习下吧。 大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统、信息录入系统等就经常会有这一些提示,…

    2025年3月8日 编程技术
    200
  • 在jquery中有关无new如何构建

    大部分人使用 jquery 的时候都是使用第一种无 new 的构造方式,直接 $(”) 进行构造,这也是 jquery 十分便捷的一个地方。这篇文章主要给大家介绍了关于jquery学习笔记之无new构建的相关资料,需要的朋友们下…

    编程技术 2025年3月8日
    200
  • 在JS中如何实现登录页密码的显示和隐藏

    在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能。下面给大家介绍基于js实现登录页密码的显示和隐藏功能,需要的朋友参考下吧 在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能,其实实现原理很简单…

    2025年3月8日
    200
  • 在js中如何提取某()特殊字符串长度(详细教程)

    下面小编就为大家分享一篇js 提取某()特殊字符串长度的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 实例如下所示: // 提取特殊字符串长度(scrstr 源字符串 armstr 特殊字符)getStrCount:…

    编程技术 2025年3月8日
    200
  • 在JS中有关数组函数如何使用

    本篇文章小编给大家整理了非常全的js数组函数以及相关的写法规则,希望能够对读者们起到帮助和参考。 脚本之家以前就给大家整理过关于JS数组相关的内容,这次我们给大家整理的是非常实用的JS数组操作技巧和写法,学习下吧。 instanceof 检…

    编程技术 2025年3月8日
    200
  • 利用JavaScript如何实现省市联动

    这篇文章主要为大家详细介绍了解决javascript实现省市联动过程中的bug,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先把实现省市联动遇到的问题描述一下 1.1.原来的思路 1.1.1、初始化加载省份 $.ajax({  ‘ty…

    编程技术 2025年3月8日
    200
  • 在js中有关indexof与search方法有什么区别

    下面小编就为大家分享一篇基于js 字符串indexof与search方法的区别介绍,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 1.indexof方法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的…

    2025年3月8日
    200
  • 在JavaScript中有关match与replace方法(详细教程)

    下面小编就为大家介绍一下javascript中的字符串的match与replace方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 1、match方法 match() 方法可在字符串内检索指定的值,或找到一个或多个正则表…

    2025年3月8日
    200

发表回复

登录后才能评论