前端面试题解析

题目如下:

const p1 = { name: 'zhangsan' };
const p2 = { name: 'lisi' };
const obj = {};
obj[p1] = 'xxx';
obj[p2] = 'yyy';
console.log(obj[p1]);

输出结果是什么?

答案是'yyy'

解析

首先我们要知道

js中有对象有两种属性访问语法

var myObject={
	a:2
}
myObject.a;
myObjetc["a"]

.a语法通常被称为"属性访问"
[”a“]语法通常被称为"键值访问"

在对象中，属性名永远都是字符串，如果你是使用了string以外的其他值作为属性名，那他也首先也会被转换成一个字符串

而这里的obj[p1]的[]是计算属性,里面有变量p1,会将p1转化为string类型

也就是说obj[p1]中的p1会转成字符串'[object Object]'的,同理p2也是转换成这样,

相当于

obj['[object Object]'] = 'xxx';
obj['[object Object]'] = 'yyy'

所以p2将p1覆盖了最后也就打印出'yyy'

扩展

上面说到p1,p2会转换成字符串,那么转换规则是怎样的呢?

首先看p1有没有Symbol.toPrimitive方法,如果没有就会找在Object.Prototype.tostring的方法.

也可以自定义的改写转换规则,如图