Object.assign 还能这么用吗？

[howell5]

看到一篇文章： 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、假设这种实现不行，若是想达到这种效果，靠原生怎么实现？（不自己定义函数）

[CoverL]

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

[codingBug]

学到了

[AlphaTr]

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

[xxx749]

学到了

[cheeto]

https://stackoverflow.com/questions/42560540/what-happens-when-i-object-assign-to-a-primitive-type-in-javascript

colors.gray 是个 Object 没错，在使用${}模版字符串占位符时，应该就默认调用了它的 toString()方法吧，使其输出为#DDDDDD

[roscoecheung1993]

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]

学习一下

[shiny]

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

[howell5]

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

[zbinlin]

你可以这样定义：

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

'#DDDDDD' === `${colors.gray}`
'#EEEEEEE' === `${colors.gray.light}`
'#CCCCCC' === `${colors.gray.dark}`

[chuxiaonan]

toString() 可以做到
Proxy 应该也可以

[chuxiaonan]

试了一下 Proxy 似乎并不可以

[ssshooter]

有点意思

[autoxbc]

基本包装类型另一个玩法是把包装作为容器，挂载一些私有数据上去
比如对一个基本类型数据做链式加工，原始值挂在包装上，可以在需要时提取出来

[ruandao]

div ' 的是什么无法？

[ericgui]

@ruandao

这个用的是 styled components
你查一下

[ericgui]

@roscoecheung1993 牛逼

https://www.ecma-international.org/ecma-262/6.0/#sec-object.assign

[galikeoy]

@ericgui #16 怎么感觉跟 react 组件语法相似呢

[userdhf]

相当于是在包装类型上挂载了几个{}吗?
类似于 var arr=[]; a.my="asdasd";这样?