Object.assign 还能这么用吗？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1854 天前的主题，其中的信息可能已经有所发展或是发生改变。

看到一篇文章： 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

2019-10-29 17:39:02 +08:00

String 为包装类型，String(colors.gray) === ‘#dddddd’; 看下相关知识吧

codingBug

2019-10-29 17:45:41 +08:00

学到了

AlphaTr

2019-10-29 17:47:58 +08:00

const a = Object.assign("#DDDDDD", {light: "#EEEEEE", dark: "#CCCCCC"}); console.log(`${a}, ${a.light}`); 原生就这么用就行吧

xxx749

2019-10-29 18:02:17 +08:00 via Android

学到了

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

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

2019-10-29 19:26:43 +08:00

学习一下

shiny

2019-10-29 19:28:53 +08:00

js 正是一门可以活到老学到老的语言，寿与天齐，千秋万载，一统江湖

howell5

2019-10-29 21:08:03 +08:00

@roscoecheung1993 @CoverL @cheeto @AlphaTr
ok, 我 get 到了。返回的是 object 没错。忽略了 toString()的隐形触发 -_-|| 。
只有当实际使用到类似于${}自动触发或者自己手动触发 toString()去使用。感谢各位。

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}`