为什么append到父节点后的子节点发生修改，父节点打印出来的也会变化

最新推荐文章于 2024-07-08 16:22:29 发布

sma2mmm

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量115

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/sma2mmm/article/details/133644279

版权

今天走查前端代码，发现历史代码写出来的不规范，但是他还是在生产运行了很久的代码，仔细思量后发现，其实原理是对的，只是看起来不美观，不易读而已。

废话不说，先上demo代码


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <title>appendTest</title>

  <script>
    function init(){
      var BatteryCapacityDiv = document.createElement("div");//创建Element对象
      BatteryCapacityDiv.className = 'popTowCol2';//className属性赋值
      var parentNode =  document.getElementById("pano_holder");
      parentNode.appendChild(BatteryCapacityDiv);
      console.log( parentNode)
      BatteryCapacityDiv.appendChild(getSecondHtml());
      console.log( parentNode)
    }
    function getSecondHtml(){
      var batteryCapacity_div = document.createElement("div");
      batteryCapacity_div.className = 'popLine';
      batteryCapacity_div.innerText = "testSecondHtml";
      return batteryCapacity_div;
    }

  </script>
</head>
<body onload="init()">
<div id="pano_holder"></div>
</body>
</html>

怎么样？你觉得init方法里边打印的两个console一样吗？答案是一样的；

来，上图

看出来没，一模一样，怎么理解呢？

实际上需要对象的一些基础知识来解答

1）实例化 Element 对象BatteryCapacityDiv时开辟出一块内存空间, 并在内存地址对应的内存中写入数据

2）使 parentNode 指向 BatteryCapacityDiv 对象, parentNode也对应 BatteryCapacityDiv 的内存地址

3）通过BatteryCapacityDiv对象修改值内存中的值改变，但是BatteryCapacityDiv对象、parentNode中的key对应的内存地址并没有改变
因此 parentNode取值改变

参考链接：修改对象的值，集合中的值也被改变? 一句话看懂内存空间内存地址与引用对象_使用java对象池为什么会把之前存到集合中的数据改变呢?-CSDN博客

sma2mmm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
为什么append到父节点后的子节点发生修改，父节点打印出来的也会变化

3）通过BatteryCapacityDiv对象修改值内存中的值改变，但是BatteryCapacityDiv对象、parentNode中的key对应的内存地址并没有改变。2）使 parentNode 指向 BatteryCapacityDiv 对象, parentNode也对应 BatteryCapacityDiv 的内存地址。今天走查前端代码，发现历史代码写出来的不规范，但是他还是在生产运行了很久的代码，仔细思量后发现，其实原理是对的，只是看起来不美观，不易读而已。看出来没，一模一样，怎么理解呢？
复制链接

扫一扫