JS中原型对象中的constructor的作用?

2023-10-26

最近被同事问道一个问题:

function Father() {
    this.color = ['red', 'green'];
  }
  function Child() {
    this.test = 1;
  }

  Child.prototype = new Father();

  let instance = new Child();

这个例子是经典原型链继承,未做constructor修复的一个例子。
问:
instance的属性test哪里来的,要知道这里的此时instance的构造函数instance.constructor是Father,我们再根据一般Java,ES6类中的构造函数的拷贝属性用法,instance的属性要有也是Father的color?

问题就在这里了,js的new并不像Java 这种OOP语言的new一样,js的new后面的不是类,就是普通函数,普通函数以new调用,内部过程为:MDN,New
test的属性是通过this的改变获取到的,压根没走js原型对象中的constructor。所以这里就是一个误区。

那么js原型对象中的constructor有什么作用?上面的继承让我们instance.color通过原型链访问到了Father的color属性,最后为什么一般要修复Child.prototype.constructor = Child呢。

答案其实也没那么重要:

constructor属性不影响任何JavaScript的内部属性。constructor其实没有什么用处,只是JavaScript语言设计的历史遗留物。由于constructor属性是可以变更的,所以未必真的指向对象的构造函数,只是一个提示。不过,从编程习惯上,我们应该尽量让对象的constructor指向其构造函数,以维持这个惯例。

目前看到的作用之一,通过实例的构造函数给闭包中的函数增加属性方法。

var a,b;
(function(){
  function A (arg1,arg2) {
    this.a = 1;
    this.b=2; 
  }

  A.prototype.log = function () {
    console.log(this.a);
  }
  a = new A();
  b = new A();
})()
a.log();
// 1
b.log();
// 1

通过以上代码我们可以得到两个对象,a,b,他们同为类A的实例。因为A在闭包里,所以现在我们是不能直接访问A的,那如果我想给类A增加新方法怎么办?

// a.constructor.prototype 在chrome,firefox中可以通过 a.__proto__ 直接访问
a.constructor.prototype.log2 = function () {
  console.log(this.b)
}

a.log2();
// 2
b.log2();
// 2

通过访问constructor就可以了。
在这里插入图片描述
这位老哥的解释也就是上面的代码的一个应用了。

不过你拿到 prototype 也不见得能拿到 正确的 constructor,JS没有提供方式确保你拿到“正确”的
constructor。我们只能根据惯例相信对象上的 constructor 应该是“正确”的 constructor。

这也是我们上面做constructor修复的一个原因了。

参考:
知乎
红宝石书

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

JS中原型对象中的constructor的作用? 的相关文章

  • 如何安全地存储 Discord(OAuth2) 用户的访问令牌?

    我正在努力寻找一种安全保存访问令牌的方法 我的 Web 应用程序在用户授权应用程序后从 DiscordAPI 检索到该访问令牌 我正在为 Discord 机器人创建一个网络界面 重要的是 不是每个人都可以使用它 仅应允许特定 Discord
  • AJAX 加载 WordPress 内容

    我一直在遵循 AJAX 教程来尝试将我的 WordPress 帖子内容加载到我网站的主页上 而无需重新加载页面 我不知道为什么 但是当单击链接时 它仍然导航到页面 而不是将内容加载到我指定的 div 中 不管怎样 这对我来说有点太多了 我希
  • 如何使用 forEach 删除列表中的元素?

    var people alex jason matt people forEach function p if p length gt 4 REMOVE THIS PERSON or pop it out of the list or wh
  • 为什么 DropDownList.SelectedIndexChanged 事件不触发?

    我有一个绑定到 ObjectDataSource 的 DropDown 在其数据绑定事件中 我在 0 索引上添加 select 值 我在页面上有一个 LinkBut ton 在其客户端单击时 我在下拉列表中选择不同的项目 使用 JavaSc
  • 这是 Firefox 中的错误还是 chrome 主动修复了我做错的事情?

    当麦克风的信号超过设定的阈值时 下面的代码只是将一个框变成红色 它在 Linux 上的 chromium 和 Windows 上的 chrome 上快乐地运行一整天 它在两个平台上的 Firefox 上也运行良好 大约 15 秒 当它在 F
  • npm 命令不显示任何输出或结果

    npm v 没有给出任何输出 https i stack imgur com 1Z5yf png 请参阅附图 我已经安装了node js 打开我的 git bash 后 如果我运行 node v 它会给我节点版本 但是在我写 npm v 后
  • Bootstrap 3 + 选择 + jquery 验证丢失格式

    我有下面的代码http jsfiddle net emamut CBjmj 4 http jsfiddle net emamut CBjmj 4 validator setDefaults ignore hidden not select
  • 如何在cordova中动态加载CSS

    我正在尝试通过 xhr 请求在 cordova 中动态加载 CSS CSS 的加载不是问题 我可以通过 xhr 加载它并通过 HTML5 文件 API 将其存储到文件系统 然后我就可以得到一个完美的 URL 但是如果我通过 javascri
  • 单击单选按钮时事件触发的顺序是什么?

    我知道这在浏览器之间是不同的 例如如果我将一个函数附加到单选按钮的 onclick 和 onchange 事件 然后单击它 Chrome 会触发 onchange 然后触发 onclick 而 Firefox 则会执行相反的操作 是否有任何
  • 检查变量/键是否存在

    我有一位价值不同的客户 如果客户 是 则分数 10 如果客户 否 则得分 5 如果客户为空 则分数 0 对于第一个和第二个条件 我的 json 结构如下 json fields customer 1 0 3 self aaa value y
  • 当用户输入时将输入值转换为货币格式

    我无法将输入值转换为货币格式 我想在用户键入数字 5 000 00 125 000 00 时自动添加千位和小数分隔符 这是我的代码 input CurrencyInput on blur focus keyup function this
  • jQuery 可以改变 css 样式定义吗? (不是每个元素的单独CSS)

    我还没有看到任何文档说 jQuery 可以更改任何 CSS 定义 例如更改 td padding 0 2em 1 2em to td padding 0 32em 2em 但要么必须更改整个样式表 要么更改每个元素的类 要么更改每个元素的
  • Indexeddb 添加新值而不是更新现有值

    当尝试更新其中的记录时索引数据库使用put方法 看起来是创造了新的价值而不是改变 根据MDN https developer mozilla org en US docs Web API IDBObjectStore put这是更新记录的方
  • 如何在 javascript 中使用 .net 资源文件

    无论如何 我可以在 javascript 中访问我的资源文件 resx 吗 如果没有 那么是否有任何解决方法可以用不同语言的 javascript 显示消息 如果您的 javascript 在页面中 您可以使用 var globalReso
  • jquery 可以操作用 DOM 创建的临时文档吗?

    我想要实现的目标是通过传递一个大的 html 字符串来操作使用 jquery 使用 DOM 创建的文档 考虑以下示例 var doctype document implementation createDocumentType html v
  • Parse JS SDK:无法使用主密钥,尚未提供

    我需要在我的 angular2 应用程序中使用 masterKey 但我无法将其传递给initialize功能 我无法用谷歌搜索出原因 从package json parse 1 9 2 初始化 import Parse from node
  • 从 select2 选定选项获取属性值

    我正在使用 Select2 插件http ivaynberg github io select2 select2 latest html http ivaynberg github io select2 select2 latest htm
  • 如何在类组件中使用react-router-dom v6导航

    我安装了react router dom v6 我想在以前版本的react router dom v5中使用基于类的组件this props history 在执行某些操作后适用于重定向页面 但此代码不适用于 v6 在react route
  • 当用户滚动经过页面的特定部分时,jQuery 触发操作

    大家好 我需要一个 jQuery 操作来在用户滚动经过页面上的某些位置时触发 这对于 jQuery 来说是可能的吗 我查看了 jQuery API 中的 scroll 我认为这不是我需要的 每次用户滚动时它都会触发 但我需要它在用户经过某个
  • 类型“CombinedVueInstance>>”上不存在属性“XXX”

    我使用 TypeScript 创建了一个 vue 组件 并且在以下位置收到此错误data and in methods Property xxx does not exist on type CombinedVueInstance

随机推荐

  • Prometheus监控

    Prometheus监控 时序数据库 使用kube Prometheus 使用之前要先卸载master01节点上的metrics server 否则会导致master01节点 noreday 下载安装文件 https github com
  • ping不通的几种可能原因

    平时使用中经常会碰到ping不通的情况 ping不通的原因有很多 比如路由设置问题 比如网络问题 以下列出几点原因 1 太心急 即网线刚插到交换机上就想Ping通网关 忽略了生成树的收敛时间 当然 较新的交换机都支持快速生成树 或者有的管理
  • 搭建OpenVpn

    由于个人需求 需要科学上网 就在ucloud买了一个100块一年的服务器 不过如果拿来访问openai的chatgpt在线版还是不行 因为ucloud的ip段因为大量访问 所有已经被封掉了 很多有限制的网站都不行 网上相关的文章已经有很多了
  • shader- 之高光反射

    Shader Shadertest test1Shader Properties Diffuse Diffuse Color 1 1 1 1 SubShader Tags RenderType Opaque 顶点 片元着色器代码需要卸载pa
  • Python人工智能学习路线(长篇干货)

    本文篇幅较长 干货较多 建议收藏慢慢看 前言 谈到人工智能 AI 算法 常见不外乎有两方面信息 铺天盖地各种媒体提到的高薪就业 贩卖课程 知乎上热门的算法岗 水深火热 灰飞烟灭 的梗 贩卖焦虑 其实 这两方面都是存在的 但都很片面 这里不加
  • 【Blender】我的第一个3D模型--马克杯(附教程)

    渲染图 Blander导出gltf插件 https github com Kupoman blendergltf 图文教程 对着正方体按X 确定删除默认的正方体 按Shitft A 快捷键 创建一个圆环 按TAB 键 进入编辑模式 再按E
  • 盒子模型和box-sizing属性

    1 前言 今天被杭州有赞的前端面试官面了 很多问题一知半解 主要原因还是因为我这几个月大多数时间都在写项目 平常学习也是主要以框架为主 很多基础知识都遗忘了 从这篇文章开始 我会记录 学习和研究面试中遇到的问题 当然 一般都是关于前端开发的
  • 移动数据网络类型是nr_5G(NR)网络中小区接入控制

    无线接入控制是一种针对话务拥塞的处理机制 通过限制移动设备向基站的连接请求 保护和保证紧急呼叫等关键通信的成功接入 无线侧可控制接入的方法有两种 1 终端侧 接入控制方式 在向基站移动设备发送任何连接请求之前 终端 需读取广播消息 基站 识
  • 小程序全局悬浮窗_微信小程序悬浮窗弹出怎么实现?

    微信小程序悬浮窗弹出怎么实现 很多的微信小程序管理员会在微信小程序界面开发微信小程序悬浮窗弹出功能 接下来小编会为大家介绍微信小程序悬浮窗弹出关注实现的全部步骤哦 微信小程序悬浮窗弹出怎么实现 微信小程序悬浮窗弹出的效果如下 微信小程序悬浮
  • Android开发者必备工具-常见Android模拟器(MuMu、夜神、蓝叠、逍遥、雷电、Genymotion...)

    模拟器的用途介绍 作为一名Android开发者 模拟器是我们调试和测试应用必备的神器 模拟器主要有以下用途 第一个是用于游戏 游戏玩家可以在他们的电脑上使用模拟器来让一些游戏更容易玩 他们不必依赖设备的电池寿命 借助于键盘 鼠标以及更大的屏
  • unity下简易摇杆实现

    using System Collections using System Collections Generic using UnityEngine using UnityEngine UI using UnityEngine Event
  • 华为OD机试 - 战场索敌 - 深度优先搜索dfs算法(Java 2023 B卷 100分)

    目录 一 题目描述 二 输入描述 三 输出描述 四 深度优先搜索dfs 五 解题思路 六 Java算法源码 七 效果展示 1 输入 2 输出 3 说明 4 如果增加目标敌人数量K为5 5 来 上强度 华为OD机试 2023B卷题库疯狂收录中
  • 后台管理页面,jqGrid框架使用

    之前做后台管理页面是用的 jquery LayUI 样式什么的 分页表格啊 表单之类的全是LayUI搞定 不过现在觉得 LayUI还是有点混乱 然后最近在做一个新的后台管理页面 是用的 jquery jqGrid bootstrap fa
  • weblogic 任意文件上传漏洞复现(CVE-2018-2894)

    weblogic 任意文件上传漏洞复现 CVE 2018 2894 漏洞介绍 WebLogic管理端页面 ws utc begin do ws utc config do下可上传任意getshell 复现环境 vulhub的docker环境
  • 可以新建文本的管理器_「通达信」自定义数据管理器的制作方法

    自定义数据管理器制作的数据可以实现在板块中 K线主图上显示我们制作的数据 对于记性不好的股友起到很好的提醒作用 非常使用 譬如下图中在板块中显示你自定义的数据 调出路径 功能 公式系统 自定义数据管理器 如下图 打开 自定义数据管理器 面板
  • Java注解:Java注解的基本认识

    Java的注解从1 5就有了 算不上新特性 应该算是 老特性 基本业务代码写的时候也可以说是 最熟悉陌生人 我们最起码会经常用到spring的注解来开发 比如说我们定一个 service来作为我们处理逻辑 实现服务接口的 但是可能会对自己使
  • 9 万字 208 道 Java 经典面试题总结 (附答案), 看到就是赚到

    前言 最近有很多粉丝问我 有什么方法能够快速提升自己 通过阿里 腾讯 字节跳动 京东等互联网大厂的面试 我觉得短时间提升自己最快的手段就是背面试题 最近总结了Java常用的面试题 分享给大家 希望大家都能圆梦大厂 加油 下面篇幅较长 有需要
  • rosserial_arduino的安装及使用

    本文主要是使用rosserial arduino包 可以通过msp430launchpad for arduino IDE直接使用ROS 此ide和audrino ide 的使用方法大同小异 rosserial提供了一个通信协议 它通过ar
  • matlab pcacov排序,matlab中pcacov这个命令的作用???

    满意答案 5a3d010 2013 09 12 采纳率 43 等级 12 已帮助 16369人 pcacov Principal components analysis PCA using the covariance matrix Syn
  • JS中原型对象中的constructor的作用?

    最近被同事问道一个问题 function Father this color red green function Child this test 1 Child prototype new Father let instance new