JS变量push进去数组或给其他结构误解。

对js理解陷入了误区。
场景问题:
今天同事问了我个问题,将一个变量改变,再放入一个数组中,发现后面的将前面的覆盖。

<!DOCTYPE html>
<html>
<body>

<script>
var obj = { 
   "name":"Bill Gates",
   "age":62,
   "cars": {
	  "car1":"Porsche",
	  "car2":"BMW",
	  "car3":"Volvo"
   }};
var cars = [{"car1":"11Audi", "car2":"11BMW", "car3":"11porsche"},{"car1":"22Audi", "car2":"22BMW", "car3":"22porsche"}];
// 相同名字,年龄。但是拥有的车不同。
var psersons = [];
for(let i = 0; i < cars.length; i++){
	obj.cars = cars[i];
    psersons.push(obj);
}
console.log(psersons);
</script>

</body>
</html>

错误的思维理解:
1、第一次循环,改变对象push进数组,我们第一个想要结果进去了。
1、第二次循环,改变对象push进数组,我们第二个想要结果进去了。

你想的结果:

[{ "name":"Bill Gates",
   "age":62,
   "cars": {"car1":"11Audi", "car2":"11BMW", "car3":"11porsche"}}, 
   {"name":"Bill Gates",
   "age":62,"cars": 
   {"car1":"22Audi", "car2":"22BMW", "car3":"22porsche"}}]

然而:
JS变量push进去数组或给其他结构误解。_第1张图片
为什么?这就是对堆栈理解的错误。
正确理解是这样的:确实你当前放入两个。但是这两个指的是同一个。也就是你把该对象放入两边。
JS变量push进去数组或给其他结构误解。_第2张图片
所以第二次改变的时候,第一个所指的对象也改变了。

解决方式:将对象转一下再放入。
比如:

	obj.cars = cars[i];
    psersons.push(JSON.parse(JSON.stringify(obj)));

JS变量push进去数组或给其他结构误解。_第3张图片
原则上来说,你要你改变了他的指向都是可以的。
就要看看原型了。每个变量都有个原型。
大的来说,
对一个js或ts。this = window
JS变量push进去数组或给其他结构误解。_第4张图片
如果想改变this指向就需要原型中的方法:提供了call、apply、bind这三个方法,来切换/固定this的指向。

你可能感兴趣的:(front)