JavaScript中new操作符详解

javascript里实例化一个对象的时候,我们常用的方法就是使用new操作符。  本文主要和大家分享javascript中new操作符详解,希望能帮助到大家。

var Foo = function(x, y) {    this.x = x    this.y = y}var foo = new Foo(1, 2) // Foo {x: 1, y: 2}

登录后复制

那么new操作符到底做了哪些工作?我们可以看一下foo这个对象到底是一个怎样的对象。

首先,foo本身是一个对象,然后,他本身有两个属性,x跟y。同时,在大多数浏览器的控制台上,我们还能看到一个颜色稍浅的属性,叫__proto__,他有两个属性,constructor跟__proto__。

__proto__是一个访问器属性。他指向的是当前对象本身的[[Prototype]],这个[[Prototype]]并不是一个属性,他只是一个符号,代表的是构造函数Foo的原型对象Foo.prototype的,具体可以参考一下MDN上的描述。

           

foo.__proto__ === Foo.prototype // true

登录后复制

所以,我们大致描述一下

立即学习“Java免费学习笔记(深入)”;

           

var Foo = function(x, y) {    this.x = x    this.y = y}// 1. 创建一个空对象var foo = {}// 2. 调用构造函数,并且将构造函数的`this`指向fooFoo.call(foo, 1, 2)// 3. foo继承Foo的原型对象foo.__proto__ = Foo.prototype

登录后复制

等等,虽然我们上面这么写最后foo的确跟new Foo()出来的对象是一样的,但是情况并不仅仅这么简单。

我们知道,new操作符操作的是一个函数,在上面的栗子里,函数Foo并没有显式地返回任何值,所以执行这个函数之后,返回值是undefined。当构造函数没有显式地返回一个值的时候,对其执行new操作之后,会返回这个构造函数实例化之后的对象。

那如果我返回了某个值呢?

           

var Foo = function(x, y) {    this.x = x    this.y = y    return {        a: this.x    }}var foo = new Foo(1, 2) // {a: 1}

登录后复制

foo就是执行这个函数之后的返回值,那么这个时候new Foo()跟Foo()就没有任何区别了,所以通常情况下,我们并不会选择在一个构造函数里返回某个值。

特别要注意的是,如果你在构造函数里返回的不是一个对象,而是一个普通的值,比如说一个Number类型或者String类型的值,那么new之后返回的还是实例化之后的对象。

相关推荐:

js函数的new调用与普通调用中this的差异问题

关于new从一个BUG说起

js中的new操作符运行过程是怎样的

以上就是JavaScript中new操作符详解的详细内容,更多请关注【创想鸟】其它相关文章!

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

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

(0)
上一篇 2025年3月8日 18:01:07
下一篇 2025年3月8日 18:02:16

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

相关推荐

  • JavaScript闭包详细介绍

    本文主要和大家详细介绍javascript闭包,说起闭包,相信写前端的同学都知道,而且相信在实际的项目中或多或少都已经用到了闭包。那到底什么才是闭包,闭包又是怎么产生的呢? 1. 什么是闭包在阮老师的文章中提到: 闭包就是能够读取其他函数内…

    编程技术 2025年3月8日
    200
  • JavaScript焦点进入文本框内关闭输入法代码分享

    js实现焦点进入文本框内关闭输入法:imemode本文主要和大家分享js实现焦点进入文本框内关闭输入法,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧,希望能帮助到大家。 要用到的东西: imeMode:xxx 有四个参数 a…

    编程技术 2025年3月8日
    200
  • Node.js中通用基础设计模式实例分析

    一般我们对node.js中设计模式(观察者) 或 factories(工厂方法)比较熟悉,本文重点给大家介绍node.js一些基础模式的实现方法,感兴趣的朋友跟随脚本之家小编一起学习吧,本文不并专门探讨他们。只是探讨node.js一些基础模…

    编程技术 2025年3月8日
    200
  • Javascript将变量转换为字符串代码分享

    大家应该都知道,对于javascript,有3种不同方法可以将变量转换为字符串。这篇文章将详细介绍这些方法,并比较他们的优劣。本文主要和大家介绍关于javascript中将变量转换为字符串的三种方法,这三种方法分别是:value.tostr…

    编程技术 2025年3月8日
    200
  • JS中的this、apply、call、bind实例分享

    this 的指向 在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象,来,跟着我朗读三遍:this 永远指向最后调用它的那个对象,this 永远指向最后调用它的那个对象,this 永远指向最后调…

    编程技术 2025年3月8日
    200
  • JavaScript中的this规则及this对象用法实例

    想要确定this里规则是什么,几条规则确定函数里的 this 是什么。想确定 this 是什么其实非常简单。总体的规则是,通过检查它的调用位置,在函数被调用的的时候确定 this。它遵循下面这些规则,接下来以优先级顺序说明。 规则 1、如果…

    编程技术 2025年3月8日
    200
  • 如何在Node.js中使用原生ES模块

    从版本 8.5.0 开始,node.js 开始支持原生 es 模块,可以通过命令行选项打开该功能。新功能很大程度上得归功于 bradley farias。本文主要和大家介绍在 node.js 中使用原生 es 模块方法解析,还有部分内容的链…

    编程技术 2025年3月8日
    200
  • 实例详解js中ajax访问

    本文主要和大家介绍原生js中ajax访问的实例详解的相关资料,希望通过本文大家能够掌握理解这部分内容,需要的朋友可以参考下,希望能帮助到大家。 原生js中ajax访问的实例详解 form表单中 登录名: 失去光标即触发事件 function…

    编程技术 2025年3月8日
    200
  • angluarjs过滤并替换关键字功能实现代码

    本文主要和大家大家详细介绍angluarjs实现过滤并替换关键字小功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 html样式       {{ keytext|wordFilter:”#” }} 登录后复制 /…

    2025年3月8日
    200
  • JavaScript数组去重的几种方法分享

    数组去重,一般需求是给你一个数组,调用去重方法,返回数值副本,副本中没有重复元素。一般来说,两个元素通过 === 比较返回 true 的视为相同元素,需要去重,所以,1 和 “1” 是不同的元素,1 和 new nu…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论