草庐IT

javascript - ES6 继承 : uses `super` to access the properties of the parent class

coder 2024-07-19 原文

Javascript 的 super 关键字，当我在 Chrome、Babel、TypeScript 上运行代码时，我得到了不同的结果。

我的问题是哪个结果是正确的？规范的哪一部分定义了这种行为？

以下代码:

class Point {
  getX() {
    console.log(this.x); // C
  }
}

class ColorPoint extends Point {
  constructor() {
    super();
    this.x = 2;
    super.x = 3;
    console.log(this.x)   // A
    console.log(super.x)  // B
  }
  
  m() {
    this.getX()
  }
}

const cp = new ColorPoint();
cp.m();

结果:

  • Chrome 58.0.3029.110 64 位 (V8 5.8.283.38)
  • Babel Repl 6.24.2
  • typescript 2.3

链接:

最佳答案

简答:

Chrome 是正确的。这是get和set不平衡造成的。

OrdinarySet reciever 敏感，但是 OrdinaryGet不是。

所以super.x = 3和this.x = 3效果一样，因为这里的接收者是this。评估super.x，永远不会到达this，将始终得到undefined，因为A.prototype没有这样的字段。

更多详情:

super.x 是一个 SuperReference .并且分配给 SuperReference 将调用 PutValue(V, W) , 进而调用 super 对象的内部槽 [[Set]]最后是 OrdinarySet。

在普通的 JavaScript 中，语句 super.x = 3 基本上等同于:

OrdinarySet(proto, 'x', 3, this)。

其中 proto 是 super 对象，内部是 [[HomeObject]]构造函数 ColorPoint。 proto 等同于 Object.create(Point.prototype)，作为 ClassDefinitionEvaluation指定，并将其作为 [[HomeObject]] 传递给构造函数。

现在让我们看看 OrdinarySet 是如何工作的。 在步骤 4c 和 4d 中，规范要求设置操作在接收器 this 上完成，而不是 proto 对象。

Let existingDescriptor be ? Receiver.[GetOwnProperty].

If existingDescriptor is not undefined, then

If IsAccessorDescriptor(existingDescriptor) is true, return false.

If existingDescriptor.[[Writable]] is false, return false.

Let valueDesc be the PropertyDescriptor{[[Value]]: V}.

Return ? Receiver.[[DefineOwnProperty]](P, valueDesc).

这些语句表示 OrdinarySet(proto, 3, this) 表示 this.x = 3。

另一方面，OrdinaryGet 忽略 Receiver 。 super.x 是

OrdinaryGet(proto, 'x', this)。

OrdinaryGet 的子句中根本没有 Receiver!所以super.x等价于Object.create(Point.prototype).x，当然是undefined

根据经验，如果转译器和浏览器之间存在差异，浏览器(尤其是 Chrome)通常更忠于 ECMAScript 规范。转译器通常会牺牲一些边缘情况的正确性来换取运行时效率。

关于javascript - ES6 继承 : uses `super` to access the properties of the parent class，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44149248/

javascriptpropertiescode20supertypescriptinheritanceecmascript-6babeljs

有关javascript - ES6 继承 : uses `super` to access the properties of the parent class的更多相关文章

  1. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2

    刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？ 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr

  2. 使用canal同步MySQL数据到ES - 2

    文章目录一、概述简介原理模块二、配置Mysql使用版本环境要求1.操作系统2.mysql要求三、配置canal-server离线下载在线下载上传解压修改配置单机配置集群配置分库分表配置1.修改全局配置2.实例配置垂直分库水平分库3.修改group-instance.xml4.启动监听四、配置canal-adapter1修改启动配置2配置映射文件3启动ES数据同步查询所有订阅同步数据同步开关启动4.验证五、配置canal-admin一、概述简介canal是Alibaba旗下的一款开源项目，Java开发。基于数据库增量日志解析，提供增量数据订阅&消费。Git地址：https://github.co

  3. ES基础入门 - 2

    ES一、简介1、ElasticStackES技术栈：ElasticSearch：存数据+搜索；QL；Kibana：Web可视化平台，分析。LogStash：日志收集，Log4j:产生日志；log.info(xxx)。。。。使用场景：metrics：指标监控…2、基本概念Index（索引）动词：保存（插入）名词：类似MySQL数据库，给数据Type（类型）已废弃，以前类似MySQL的表现在用索引对数据分类Document（文档）真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear

  4. Ruby - 如何处理子类意外覆盖父类(super class)私有(private)字段的问题？ - 2

    假设您编写了一个类Sup，我决定将其扩展为SubSup。我不仅需要了解你发布的接口(interface)，还需要了解你的私有(private)字段。见证这次失败:classSupdefinitialize@privateField="fromsup"enddefgetXreturn@privateFieldendendclassSub问题是，解决这个问题的正确方法是什么？看起来子类应该能够使用它想要的任何字段而不会弄乱父类(superclass)。编辑:equivalentexampleinJava返回"fromSup"，这也是它应该产生的答案。 最佳答案

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. ruby - Chef : Read variable from file and use it in one converge - 2

    我有以下代码，它下载一个文件，然后将文件的内容读入一个变量。使用该变量，它执行一个命令。这个配方不会收敛，因为/root/foo在编译阶段不存在。我可以通过多个聚合和一个来解决这个问题ifFile.exist但我想用一个收敛来完成它。关于如何做到这一点有什么想法吗？execute'download_joiner'docommand"awss3cps3://bucket/foo/root/foo"not_if{::File.exist?('/root/foo')}endpassword=::File.read('/root/foo').chompexecute'join_domain'd

  7. ruby-on-rails - 语法错误 : unexpected $end when using if/else if? - 2

    我从我的一个Controller类中收到一个错误，我不知道为什么。错误是:SyntaxErrorinTermsController#show,syntaxerror,unexpected$end,expectingkeyword_end这是terms_controller.rb:classTermsController我的展示页面目前只包含:这可能是我遗漏的一些小东西-感谢您的帮助! 最佳答案 问题是end关键字不够，它在它之前找到了$end(代表文件结尾的标记)可以找到它要找的东西——另一个end。(end关键字的解析器标记是“k

  8. ruby-on-rails - 从对 super 的调用中清理一个 block - 2

    我正在使用ActiveAttr，它为您提供了很好的通过block选项进行初始化:person=Person.new()do|p|p.first_name='test'p.last_name='man'end但是，在包含ActiveAttr::Model的特定类中，我想绕过此功能，因为我想将该block用于其他用途。所以我们开始吧:classImperator::CommandincludeActiveAttr::ModelendclassMyCommand这失败得很惨，因为该block仍然向上传递到链中，并最终在ActiveAttr内部运行此代码:definitialize(*)sup

  9. ruby HTTPClient : How to use persistent connections? - 2

    如何通过HTTPClient使用持久HTTP连接？发送HTTP请求时是否只是设置KeepAlive的问题？文档指出支持持久连接，但没有告诉我们如何使用它们。 最佳答案 是availableinNet::HTTP如文档中所写，Net::HTTP.startimmediatelycreatesaconnectiontoanHTTPserverwhichiskeptopenforthedurationoftheblock.Theconnectionwillremainopenformultiplerequestsintheblockift

  10. ruby - 当前的 Ruby 方法是通过 super 调用的吗？ - 2

    在运行时的方法中，有没有办法知道该方法是否已通过子类中的super调用？例如moduleSuperDetectordefvia_super?#whatgoeshere?endendclassFooincludeSuperDetectordefbarvia_super??'super!':'nothingspecial'endendclassFu"nothingspecial"Fu.new.bar#=>"super!"我如何编写via_super?，或者，如果需要，如何编写via_super?(:bar)？ 最佳答案 可能有更好的方法

随机推荐