JS中new()实现了哪些功能?

这次给大家带来JS中new()实现了哪些功能?,使用JS中new()的注意事项有哪些,下面就是实战案例,一起来看一下。

前言

和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象。 但在 javascript 中,万物皆对象,为什么还要通过 new 来产生对象? 本文将带你一起来探索 javascript 中 new 的奥秘…

要创建 Person 的新实例,必须使用 new 操作符。

以这种方式调用构造函数实际上会经历以下 4个步骤:

(1) 创建一个新对象;

(2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象) ;

(3) 执行构造函数中的代码(为这个新对象添加属性) ;

(4) 返回新对象。

 new 操作符

在有上面的基础概念的介绍之后,在加上new操作符,我们就能完成传统面向对象的class + new的方式创建对象,在JavaScript中,我们将这类方式成为Pseudoclassical。

基于上面的例子,我们执行如下代码

var obj = new Base();

登录后复制

这样代码的结果是什么,我们在Javascript引擎中看到的对象模型是:

JS中new()实现了哪些功能?

new操作符具体干了什么呢?其实很简单,就干了三件事情。

var obj = {};obj.proto = Base.prototype;Base.call(obj);

登录后复制

第一行,我们创建了一个空对象obj

第二行,我们将这个空对象的proto成员指向了Base函数对象prototype成员对象

第三行,我们将Base函数对象的this指针替换成obj,然后再调用Base函数,于是我们就给obj对象赋值了一个id成员变量,这个成员变量的值是”base”,关于call函数的用法。

如果我们给Base.prototype的对象添加一些函数会有什么效果呢?

例如代码如下:

Base.prototype.toString = function() { return this.id;}

登录后复制

那么当我们使用new创建一个新对象的时候,根据proto的特性,toString这个方法也可以做新对象的方法被访问到。于是我们看到了:

构造子中,我们来设置‘类’的成员变量(例如:例子中的id),构造子对象prototype中我们来设置‘类’的公共方法。于是通过函数对象和Javascript特有的proto与prototype成员及new操作符,模拟出类和类实例化的效果。

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

Vue实现Observer步骤详解

jQuery实现带有本地预览功能的图片上传

以上就是JS中new()实现了哪些功能?的详细内容,更多请关注【创想鸟】其它相关文章!

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

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

(0)
上一篇 2025年3月8日 11:24:58
下一篇 2025年2月25日 11:51:34

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

相关推荐

  • JS发送json格式POST请求

    这次给大家带来JS发送json格式POST请求,JS发送json格式POST请求的注意事项有哪些,下面就是实战案例,一起来看一下。 登录后复制 一、获取url所有参数值 function US() {var name, value;var …

    编程技术 2025年3月8日
    200
  • controller接收js传递json参数

    这次给大家带来controller接收js传递json参数,controller接收js传递json参数的注意事项有哪些,下面就是实战案例,一起来看一下。 Spring MVC在接收集合请求参数时,需要在Controller方法的集合参数里…

    编程技术 2025年3月8日
    200
  • js怎么传递数组参数

    这次给大家带来js怎么传递数组参数,js传递数组参数的注意事项有哪些,下面就是实战案例,一起来看一下。 传递参数传递字符串,所以要把数组转换为字符串, var arr=[1,23,34,5];var str = arr.toString()…

    编程技术 2025年3月8日
    200
  • Vue.js实现自定义登录表单

    这次给大家带来Vue.js实现自定义登录表单,Vue.js实现自定义登录表单的注意事项有哪些,下面就是实战案例,一起来看一下。 z表单是后台项目业务中的常用组件,这次重构了登录功能以满足登录方式可配置的需求,在此记录和分享一下。 业务场景 …

    2025年3月8日
    200
  • JS里如何验证E-mail正确地址

    这次给大家带来JS里如何验证E-mail正确地址,JS里验证E-mail正确地址的注意事项有哪些,下面就是实战案例,一起来看一下。 最近做了一个前端的项目,要求:输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,…

    2025年3月8日
    200
  • js使用分时函数步骤详解

    这次给大家带来js使用分时函数步骤详解,js使用分时函数的注意事项有哪些,下面就是实战案例,一起来看一下。 函数节流的原理是:延迟当前函数的执行,如果该次延迟还没有完成,那么忽略接下来该函数的请求。也就是说会忽掉很多函数请求。 在一些开发场…

    编程技术 2025年3月8日
    200
  • js中el表达式怎样做出非空判断

    这次给大家带来js中el表达式怎样做出非空判断,js中el表达式做出非空判断的注意事项有哪些,下面就是实战案例,一起来看一下。 注意,这里想说的不是jsp里面嵌套的el表达式的使用,而是在js中使用。 场景: 页面跳转后,使用spring …

    编程技术 2025年3月8日
    200
  • JS做出左右边列表相互移动效果

    这次给大家带来JS做出左右边列表相互移动效果,JS做出左右边列表相互移动的注意事项有哪些,下面就是实战案例,一起来看一下。 实现功能: 1.左边的下拉框内容添加到右边的下拉框,支持多选移动,且同时将右边的下拉框对象移除; 2.支持列表中项目…

    2025年3月8日
    200
  • js获取ModelAndView值步骤详解

    这次给大家带来js获取ModelAndView值步骤详解,js获取ModelAndView值的注意事项有哪些,下面就是实战案例,一起来看一下。 JS当中不能接收ModelAndView的返回值吗?一定要在JSP页面中才能接收吗? 1 方法一…

    编程技术 2025年3月8日
    200
  • JS浏览器跳转并传递参数功能详解

    这次给大家带来JS浏览器跳转并传递参数功能详解,JS浏览器跳转并传递参数的注意事项有哪些,下面就是实战案例,一起来看一下。 one.html 点击 $(“#searchBtn”).click(function() { var searchT…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论