以下面试题代码:
let obj1 = {name: 'zl'};
let obj2 = obj1;
obj1.age = obj1 = {age: 21}; // 第三行
console.log(obj1.age);
console.log(obj2.age);
猜猜会输出什么?
新手常常会认为赋值操作从右往左obj1变成了{age: 21},obj1.age又使obj1变成{age: {age: 21}},
而obj2为{name: 'zl'},故打印顺序为{"age": 21}和undefined
但实际打印顺序为21和{"age": 21},看似很反直觉对吧?
造成这个现象的原因主要涉及两个知识点:1、JavaScript引用数据类型的特点。2、操作符权重
1、思考如下代码:
let obj3 = {name: 'zl'};
let obj4 = obj3;
obj3.age = 21;
console.log(obj3); // {"name": "zl", "age": 21}
console.log(obj4); // {"name": "zl", "age": 21}
obj3 = {};
console.log(obj4); // {"name": "zl", "age":21}
obj4 = obj3这句代码实际上是让obj4成为一个指向{name: 'zl'}这个对象本身的指针,跟obj3这个变量实际关系不大。
obj3.age操作了对象{name: 'zl'}使之变为{"name": "zl", "age": 21},obj4指向对象本身,所以也跟着变。
但obj3 = {}只是让obj3指向了其他地方,跟{"name": "zl", "age": 21}几乎没有什么鸟蛋关系。对象本身还在那里,故obj4仍为{"name": "zl", "age": 21}。
归根结底,JavaScript涉及到引用数据类型如对象时,=操作符不再是单纯的赋值操作,而是一个玩指针的操作。
2、权重问题就简单了,查查mdn文档就知道.的优先级大于=
故面试题中第三行代码实际上顺序为obj1.age = {age: 21}; obj1 = {age: 21};
相信读懂本文章后,与之相类似的面试题就如同砍瓜切菜一样简单了。