V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
howell5
V2EX  ›  程序员

Object.assign 还能这么用吗?

  •  
  •   howell5 · 2019-10-29 17:20:04 +08:00 · 1743 次点击
    这是一个创建于 1612 天前的主题,其中的信息可能已经有所发展或是发生改变。

    看到一篇文章: https://nbsaw.surge.sh/#/post/71

    作者想把

    var colors = {
      gray: {
         default: "#DDDDDD",
         light: "#EEEEEE",
         dark: "#CCCCCC"
      })
    }
    

    省去 default, 实现这样的效果:

    const Components =  styled.div`
      background: ${ colors.gray }; // background: #DDDDDD
    `
    const Components2 =  styled.div`
      background: ${ colors.gray.light }; // background: #EEEEEE
    `
    const Components3 =  styled.div`
      background: ${ colors.gray.dark }; // background: #CCCCCC
    `
    

    实现的方法是这样:

    const colors = {
      gray: Object.assign("#DDDDDD", {
         light: "#EEEEEE",
         dark: "#CCCCCC"
      })
    }
    

    一开始是感兴趣的,但是发现自己确实实现不了,返回的 colors.gray 是个 object, 查了下 MDN 上 Object.assign 的首个参数只能是 object, 就算不是 object 也会转成 object。

    所以问题是:

    • 1、我实现的方式是不是不对?( runtime 和标准的问题?)
    • 2、假设这种实现不行,若是想达到这种效果,靠原生怎么实现?(不自己定义函数)
    19 条回复    2019-10-30 16:43:53 +08:00
    CoverL
        1
    CoverL  
       2019-10-29 17:39:02 +08:00   ❤️ 1
    String 为包装类型,String(colors.gray) === ‘#dddddd’; 看下相关知识吧
    codingBug
        2
    codingBug  
       2019-10-29 17:45:41 +08:00
    学到了
    AlphaTr
        3
    AlphaTr  
       2019-10-29 17:47:58 +08:00
    const a = Object.assign("#DDDDDD", {light: "#EEEEEE", dark: "#CCCCCC"}); console.log(`${a}, ${a.light}`); 原生就这么用就行吧
    xxx749
        4
    xxx749  
       2019-10-29 18:02:17 +08:00 via Android
    学到了
    cheeto
        5
    cheeto  
       2019-10-29 18:08:06 +08:00
    https://stackoverflow.com/questions/42560540/what-happens-when-i-object-assign-to-a-primitive-type-in-javascript

    colors.gray 是个 Object 没错,在使用${}模版字符串占位符时,应该就默认调用了它的 toString()方法吧,使其输出为#DDDDDD
    roscoecheung1993
        6
    roscoecheung1993  
       2019-10-29 18:19:52 +08:00
    ecma 定义 Object.assign 的第一步:第一个参数 toObject,

    Let to be ToObject(target)

    string ToObject 操作如下

    Return a new String object whose [[StringData]] internal slot is set to the value of argument

    所以原生这么写没毛病
    zzlit
        7
    zzlit  
       2019-10-29 19:26:43 +08:00
    学习一下
    shiny
        8
    shiny  
       2019-10-29 19:28:53 +08:00   ❤️ 1
    js 正是一门可以活到老学到老的语言,寿与天齐,千秋万载,一统江湖
    howell5
        9
    howell5  
    OP
       2019-10-29 21:08:03 +08:00
    @roscoecheung1993 @CoverL @cheeto @AlphaTr
    ok, 我 get 到了。返回的是 object 没错。忽略了 toString()的隐形触发 -_-|| 。
    只有当实际使用到类似于${}自动触发或者自己手动触发 toString()去使用。感谢各位。
    zbinlin
        10
    zbinlin  
       2019-10-29 22:23:48 +08:00
    你可以这样定义:

    var colors = {
    gray: {
    toString: () => "#DDDDDD",
    light: "#EEEEEE",
    dark: "#CCCCCC",
    },
    };

    '#DDDDDD' === `${colors.gray}`
    '#EEEEEEE' === `${colors.gray.light}`
    '#CCCCCC' === `${colors.gray.dark}`
    chuxiaonan
        11
    chuxiaonan  
       2019-10-29 22:35:32 +08:00
    toString() 可以做到
    Proxy 应该也可以
    chuxiaonan
        12
    chuxiaonan  
       2019-10-29 22:42:02 +08:00
    试了一下 Proxy 似乎并不可以
    ssshooter
        13
    ssshooter  
       2019-10-29 23:16:44 +08:00 via Android
    有点意思
    autoxbc
        14
    autoxbc  
       2019-10-30 03:44:25 +08:00   ❤️ 1
    基本包装类型另一个玩法是把包装作为容器,挂载一些私有数据上去
    比如对一个基本类型数据做链式加工,原始值挂在包装上,可以在需要时提取出来
    ruandao
        15
    ruandao  
       2019-10-30 05:36:05 +08:00 via iPhone
    div ' 的是什么无法?
    ericgui
        16
    ericgui  
       2019-10-30 05:50:20 +08:00
    @ruandao

    这个用的是 styled components
    你查一下
    galikeoy
        18
    galikeoy  
       2019-10-30 10:44:33 +08:00
    @ericgui #16 怎么感觉跟 react 组件语法相似呢
    userdhf
        19
    userdhf  
       2019-10-30 16:43:53 +08:00
    相当于是在包装类型上挂载了几个{}吗?
    类似于 var arr=[]; a.my="asdasd";这样?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2091 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 16:14 · PVG 00:14 · LAX 09:14 · JFK 12:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.