JavaScript 中的“new”关键字是什么?

2024-06-19

The newJavaScript 中的关键字第一次遇到时可能会很混乱,因为人们倾向于认为 JavaScript 不是面向对象的编程语言。

  • 它是什么?
  • 它解决什么问题?
  • 什么时候合适,什么时候不合适?

它做了 5 件事:

  1. 它创建一个新对象。这个对象的类型很简单object.
  2. 它设置这个新对象的内部,不可访问,[[prototype]] (i.e. __proto__) 属性是构造函数的外部、可访问的,prototype对象(每个函数对象自动有一个prototype财产)。
  3. 它使得this变量指向新创建的对象。
  4. 它执行构造函数,每当this被提到。
  5. 它返回新创建的对象,除非构造函数返回一个非null对象引用。在这种情况下,将返回该对象引用。

Note: 构造函数指的是后面的函数new关键字,如

new ConstructorFunction(arg1, arg2)

完成此操作后,如果请求新对象的未定义属性,脚本将检查该对象的[[prototype]]相反,该属性的对象。这就是如何获得类似于 JavaScript 中传统类继承的东西。

最困难的部分是第 2 点。每个对象(包括函数)都有这个内部属性,称为[[prototype]]。它可以only在对象创建时设置,或者使用new, with Object.create,或基于文字(函数默认为Function.prototype, 数字到Number.prototype, ETC。)。它只能通过以下方式读取Object.getPrototypeOf(someObject)。有no其他获取或设置该值的方法。

除了隐藏功能之外[[prototype]]属性,还有一个属性称为原型,您可以访问和修改它,以便为您创建的对象提供继承的属性和方法。


这是一个例子:

ObjMaker = function() { this.a = 'first'; };
// `ObjMaker` is just a function, there's nothing special about it
// that makes it a constructor.

ObjMaker.prototype.b = 'second';
// like all functions, ObjMaker has an accessible `prototype` property that 
// we can alter. I just added a property called 'b' to it. Like 
// all objects, ObjMaker also has an inaccessible `[[prototype]]` property
// that we can't do anything with

obj1 = new ObjMaker();
// 3 things just happened.
// A new, empty object was created called `obj1`.  At first `obj1` 
// was just `{}`. The `[[prototype]]` property of `obj1` was then set to the current
// object value of the `ObjMaker.prototype` (if `ObjMaker.prototype` is later
// assigned a new object value, `obj1`'s `[[prototype]]` will not change, but you
// can alter the properties of `ObjMaker.prototype` to add to both the
// `prototype` and `[[prototype]]`). The `ObjMaker` function was executed, with
// `obj1` in place of `this`... so `obj1.a` was set to 'first'.

obj1.a;
// returns 'first'
obj1.b;
// `obj1` doesn't have a property called 'b', so JavaScript checks 
// its `[[prototype]]`. Its `[[prototype]]` is the same as `ObjMaker.prototype`
// `ObjMaker.prototype` has a property called 'b' with value 'second'
// returns 'second'

这就像类继承,因为现在,您使用的任何对象new ObjMaker()似乎也继承了“b”属性。

如果你想要类似子类的东西,那么你可以这样做:

SubObjMaker = function () {};
SubObjMaker.prototype = new ObjMaker(); // note: this pattern is deprecated!
// Because we used 'new', the [[prototype]] property of SubObjMaker.prototype
// is now set to the object value of ObjMaker.prototype.
// The modern way to do this is with Object.create(), which was added in ECMAScript 5:
// SubObjMaker.prototype = Object.create(ObjMaker.prototype);

SubObjMaker.prototype.c = 'third';  
obj2 = new SubObjMaker();
// [[prototype]] property of obj2 is now set to SubObjMaker.prototype
// Remember that the [[prototype]] property of SubObjMaker.prototype
// is ObjMaker.prototype. So now obj2 has a prototype chain!
// obj2 ---> SubObjMaker.prototype ---> ObjMaker.prototype

obj2.c;
// returns 'third', from SubObjMaker.prototype

obj2.b;
// returns 'second', from ObjMaker.prototype

obj2.a;
// returns 'first', from SubObjMaker.prototype, because SubObjMaker.prototype 
// was created with the ObjMaker function, which assigned a for us

我读了很多关于这个主题的垃圾,最后发现这一页 http://joost.zeekat.nl/constructors-considered-mildly-confusing.html,其中用漂亮的图表很好地解释了这一点。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript 中的“new”关键字是什么? 的相关文章

  • jQuery.remove(),分离 DOM 元素,但我仍然可以从代码中访问这些元素。如何避免泄漏?

    我知道 在具有大量 UI 元素且完全基于 Ajax 的应用程序中正确管理内存并不容易 在我的应用程序中 页面永远不会重新加载 但我想了解以下行为 我有一个根元素 一次必须附加一个子元素 将其视为根元素是应用程序容器 子元素是单个页面 每当我
  • 如何在 SailsJS 中选择性地包含 javascript 资源?

    在 Sails js 应用程序中 如何有选择地包含 javascript 资源 例如 如果我有一个管理页面 并且 admin js 位于 assets js 目录中 如何防止 admin js 在公共索引页上加载 我知道我可以将 js 移出
  • 解析 Immutable.js 中的嵌套记录

    假设我使用 Immutable js 定义了以下记录 var Address Immutable Record street city zip var User Immutable Record name address new Addre
  • 如何在 JavaScript 中正确初始化 ErrorEvent?

    我需要开火ErrorEvent以编程方式 但无法弄清楚如何初始化事件的属性 这些属性是只读的 并且initEvent 仅初始化事件类型 是否冒泡以及是否可取消 I tried var myErrorEvent new ErrorEvent
  • 根据id统计div元素

    我有一个类似的页面 div div div div div div div div div div div div 我想知道 id 与表达式 box content X text 其中 X 是数字 匹配的 div 的数量 我可以使用纯 ja
  • 如何理解javascript React中的这段代码

    我在网上找到了这个函数在js中的实现 这个函数递归地过滤一个对象数组 每个对象可能有属性 children 它是对象数组 并且对象也可能有孩子等等 该函数工作正常 但我有点不明白 这是我的功能 getFilteredArray array
  • 在 JavaScript 中按名字(按字母顺序)对数组进行排序[重复]

    这个问题在这里已经有答案了 我有一个数组 请参阅下面的数组中的一个对象 我需要使用 JavaScript 按名字排序 我该怎么做 var user bio null email email protected cdn cgi l email
  • Angular 资源测试:$httpBackend.flush() 导致意外请求

    我想测试 angularjs 资源 use strict AddressService provides functionality to use address resource in easy way This is an exampl
  • Vuex 2.0 调度与提交

    有人可以解释一下什么时候使用调度和提交吗 我理解提交会触发突变 调度会触发操作 然而 派遣不也是一种行动吗 正如你所说 dispatch触发一个动作 并且commit触发突变 以下是如何使用这些概念 你总是用 dispatch来自路线 组件
  • 错误:使用本地文件时,summernote 不是一个函数

    我遇到了一个非常奇怪的问题 当我使用本地的 Summernote 文件加载文本编辑器时 发生了 summernote 不是函数 的情况 但是 如果我使用 cdn 文件加载编辑器 一切都会顺利 这是我的 HTML 标头代码
  • 从谷歌加载 jquery 不起作用(对我来说)

    啊 我是个可怜的菜鸟 下面的 html 文档没有提醒任何人我的求助 有人知道为什么吗 这对我有用
  • 如何通过 Javascript 获取 Bootstrap 版本?

    有没有办法通过调用函数来获取Bootstrap版本 我做了一些研究 但找不到任何方法 版本信息包含在开头的注释中 如下所示 引导程序 v3 3 7 http getbootstrap com http getbootstrap com 版权
  • 使用 ES6 从子级获取父类名?

    我想获取父类名称 Parent 但我只能使用此代码检索子类名称 Child use strict class Parent class Child extends Parent var instance new Child console
  • 如何从加载程序中排除文件

    我有 webpack 加载器的下一个配置 module loaders test js include rootDir src loader babel presets es2015 test css loader style css au
  • Vue.js:折叠/展开父级中的所有元素

    我需要为我的 Vue 组件 一些可折叠面板 添加 展开 折叠全部 功能 如果用户单击折叠按钮 然后单击某个面板并将其展开 然后单击折叠按钮不会做任何事因为观看的参数不会改变 那么如何正确实现此功能 按钮必须始终折叠和展开组件 我准备了简单的
  • 类型错误:app.makeSingleInstance 不是函数

    从 Electron v2 0 3 升级到最新版本 v5 0 1 当我尝试运行电子时 出现以下错误 TypeError app makeSingleInstance is not a function 我相信这是因为 api 已经改变了 我
  • 通过 Scriptaculous 拖放防止 JavaScript 点击事件

    我的页面上有一些可拖动的元素 这些相同的元素有一个导航到另一个页面的点击事件 我试图确定在用户拖动时防止触发单击事件的最佳方法 但如果不拖动则仍然允许单击事件 有人对实现这一目标的最佳方法有任何想法吗 我通过使用类似以下内容解决了这个问题
  • Google+ 风格的平铺照片库

    有没有人见过一个 javascript 库 它会生成一个照片库 类似于 Google 和现在的 Facebook 组织照片的方式 其中一些照片被裁剪 但所有照片都无缝地填充了一个空间 像这样的东西 我正在四处挖掘并发现了这个 虽然有点不同
  • 在 IOS 设备上制作动画时,2 个相互堆叠的动画元素会发生变化(z 索引位置)吗?

    JSFIDDLE http fiddle jshell net 6gdrQ 18 我有 2 个动画元素 一种是简单的旋转脚本 它像硬币一样旋转徽标的中间部分 另一个动画是中间部分翻转时您看到的徽标后面的粒子画布烟雾动画 我遇到的问题是画布烟
  • 流星与承诺

    我一直在尝试养成使用 Promise 的习惯 但在尝试在 Meteor 上下文中的服务器端代码中使用它们时遇到了问题 这就是问题 if Meteor isServer Meteor startup function code to run

随机推荐

  • 是否可以在没有 Javascript(仅 CSS)的情况下执行相同的操作(悬停效果)?

    我正在尝试创建一个带有图标的按钮像这样 http jsfiddle net pRdMc HTML div div class icon div span Send Email span div CSS button width 270px
  • 使用除 SINGLE_TABLE 之外的任何其他 Hibernate 继承策略时 JVM 崩溃

    好吧 这可能不太可能 但还是这样吧 在Java JRE 1 6 0 26 b03 中我有两个类 SuperControl及其子类SubControl 它们都需要是持久对象 我正在使用 Hibernate Annotations 来实现这一点
  • 在我的网站上显示 Google Analytics(分析)仪表板

    我设置了一个 ASP NET 网站 并使用 Google Analytics 进行页面跟踪 我唯一不喜欢的是我必须离开我的网站 到 Google Analytics 网站 才能看到该报告 有什么方法可以使用他们拥有的所有 AJAX 在我自己
  • 使用 获取用于 javascript 的 RSA 密钥?

    我的 Web 项目需要一个 RSA 密钥对 虽然有一些库 但我认为依靠浏览器 为了安全性和速度 为我生成密钥是个好主意 是否可以使用注册机或其他浏览器 API 来执行此操作 我不知道如何从注册机获取密钥 它们似乎是在提交时生成的 但我不想将
  • Google reCaptcha 永远加载

    我在我的网站上使用 Google 的 reCaptcha 2 0 它曾经运行良好 但自从我向公众开放我的网站并获得了更多用户后 recaptcha 不再适用于大多数用户 它加载得很好 但一旦用户单击 我不是机器人 复选框 它会永远加载并且从
  • 如何通过异步调用更新列表框?

    我开发了一个 Windows 窗体 C 应用程序 我只想通过分拆另一个线程来更新主窗体中列表框中的项目 而不阻塞 GUI 窗体 由于线程无法访问列表框等表单实体 因此我想到使用委托 下面的代码显示了我如何使用委托来完成该任务 但它阻止了 G
  • 下载 .NET 3.5 的实体框架

    哪个版本的实体框架 EF 我可以用在 NET 3 5我可以在哪里下载这个旧版本 对于 Net 3 5 您可以使用 EF v1 您是否尝试从以下位置下载 Microsoft NET Framework 3 5 Service Pack 1 h
  • 错误代码:InvalidIntentSamplePhraseSlot -

    我收到错误代码Error code InvalidIntentSamplePhraseSlot当我使用新的技能控制台构建模型时 完整的错误消息是 Sample utterance AddBookmarkIntent i am at page
  • iFrame 未扩展至 100% 高度

    我有这个下面的html 我希望 iFrame 能够 100 覆盖屏幕的其余部分 我在高度属性中尝试了 100 和 但不起作用 这是为什么 谢谢 div img height 35 width 84 alt Kucku src Content
  • Passport-local-mongoose:createStrategy 不是函数/authenticate 不是函数

    我正在构建这个启动项目 https github com cj wang mean start tree 424e6056e33bb16874ae808daf3780d53309296f并尝试添加用户登录护照本地猫鼬 https www n
  • 位操作,排列位

    我正在尝试创建一个循环 循环遍历所有不同的整数 其中最后 40 位中的 10 位设置为高 其余设置为低 原因是我有一个包含 40 个不同值的地图 并且我想对其中 10 个值相乘的所有不同方式求和 这只是出于好奇 所以真正感兴趣的是 bitm
  • 如何同时运行多个功能[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我有以下代码 my func1 my func2 my func3 my func4 my func5 是否可以同时计算函数的数据 而
  • 在 iOS 5 中,我们可以邀请人们使用我们的应用程序或通过 Facebook 从应用程序发送好友请求吗?

    考虑X and Y是朋友Facebook他们都在各自的手机中安装了一个应用程序 但他们在这一点上并不是朋友应用程序的好友列表 那么现在 可以X 发送好友请求 Use Facebook sdk 3 1 https developers fac
  • 如果使用 jQuery 添加字段,Rails 嵌套表单属性不会保存

    我有一个带有嵌套表单的 Rails 表单 我使用 Ryan Bates 嵌套表单和 jquery 教程 并且就动态添加新字段而言 它工作得很好 但是当我提交表单时 它不会保存任何关联的属性 但是 如果在表单加载时构建部分 则它会很好地创建属
  • @OneToMany 与 @JoinTable 错误

    我试图理解 OneToMany with JoinTable 对于这样的场景 我正在使用 JPA 2 1 Hibernate 5 0 4 和 Oracle 11 XE 当我打电话时userDao save user 下面的代码 我有 jav
  • 将其从 Google Maps API v2 转换为 v3

    这适用于 Google Maps API v2 现在如何将其转换为 API v3 谢谢 Radar 1 Overlay Tiles var radar layer new GTileLayer new GCopyrightCollectio
  • 从内存地址创建python对象(使用gi.repository)

    有时我需要调用仅存在于 C 中的 gtk gobject 函数 但返回一个具有 python 包装器的对象 之前我使用过基于 ctypes 的解决方案 效果很好 现在我从 PyGtk import gtk 切换到 GObject intro
  • DynamodB:如何更新排序键?

    该表有两个键 filename 分区键 和eventTime 排序键 我要更新eventTime对于某些filename Tried put item and update item 发送相同的filename与新的eventTime但这些
  • 如何通过aws-sdk(javascript或node)获取s3存储桶大小

    我尝试使用 javascript nodejs aws sdk 查找 获取 s3 存储桶信息 但没有找到这样的 api 如何通过 aws sdk javascript 或 node api 获取 s3 存储桶大小 信息 每天一次向 Clou
  • JavaScript 中的“new”关键字是什么?

    The newJavaScript 中的关键字第一次遇到时可能会很混乱 因为人们倾向于认为 JavaScript 不是面向对象的编程语言 它是什么 它解决什么问题 什么时候合适 什么时候不合适 它做了 5 件事 它创建一个新对象 这个对象的