修身养性,知行合一

  • 首页
  • 爱码
    • 系统
    • 数据库
    • JavaScript
    • CSharp
    • Python
  • 生活
    • 文化
    • 美食
  • 杂谈
  • 关于
修身养性,知行合一
码字,杂谈
  1. 首页
  2. 爱码
  3. 前端
  4. JavaScript
  5. Vue
  6. 正文

TypeScript class 中的 get 属性在传递中神奇消失

2023年6月19日 188点热度 0人点赞 0条评论

问题

今天发现一个比较有意思的问题。我定义了一个 class,里面有一个 type 属性需要和 code 保持一致,所以很自然我就写了如下内容:

class Node {
  code = '';

  get type() {
    return this.code;
  }
}

这个代码本身没什么问题,也可以正常取值:

const node = new Node();

node.type; // 可以读取到对应的值

但是呢,问题来了,我使用这个对象往后端传递的时候, type 丢了~

看了一下对象结构,估计是和 get 关键字有关系:

file

而且从 dev-tool 中直接看不到 type 属性了:

file

这应该是和 get 的实现方式有关系。

为啥会有这个问题

为了找到原因,我看了一下这个 class 的属性信息:

Object.keys(node);    // ['code', 'name', 'id'],没有 type 属性
Object.getOwnPropertyDescriptors(node) // 结果如下图,没有属性描述符

file

那么就从原型上找:

const p = Object.getPrototypeOf(node);

Object.getOwnPropertyDescriptors(p); // 终于找到了,type 在原型中

file

所以,type 属性被定义在了原型中,而不在这个实例中,所以这个对象实例其实并不包含 type 属性,自然而然也就在传递对象的过程中丢失了。。。

解决方案

那么问题还是要解决的。既然通过 get 方式不可以,那么就让这个对象在实例化的时候对 type 属性特殊操作一下呗(目前我没有想到更好的解决方案,如果大家有更好的方案,欢迎留言~)

class Node {
  code = '';
  type = '';  // 为了让后续 node.type 可以正常读到 type 属性,这里可以给一个默认值声明,赋值成 code 一样即可。

  constructor() {
    Object.defineProperty(this, 'type', {
      get: () => this.code,
      enumerable: true,
      configurable: true
    });
  }
}

其实就是在 Node 实例化的时候,给这个对象的 type 属性挂上几个属性特殊值,重点就是 get: () => this.code,这样就可以做到同步了,而且无论怎么修改 type 值,都不会改变其本身的返回值。

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
标签: TypeScript vue
最后更新:2023年6月19日

jeremyjone

这个人很懒,什么都没留下

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

文章目录
  • 问题
  • 为啥会有这个问题
  • 解决方案
最新 热点 随机
最新 热点 随机
el-table 自定义滚动条后的错位问题 推荐一款 JS 水印工具 flex 踩坑小计 搭建网络图书管理系统小纪 TypeScript class 中的 get 属性在传递中神奇消失 TypeScript 类型找不到
el-table 自定义滚动条后的错位问题
MongoDB安装后允许其他IP访问的方法 Vim使用指南 真丶深入理解 JavaScript 原型和原型链(三):继承 MySql中timestamp创建日期的时区问题 祖国昌盛,繁荣富强 .NET Core将Json字符串反序列化为对象

(っ•̀ω•́)っ✎⁾⁾ 开心每一天

COPYRIGHT © 2021 jeremyjone.com. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

京ICP备19012859号-1

京公网安备 11010802028585号