求解关于js拷贝的问题

Question

我跟着教程学的程序已经正常运行，但我有一点不能理解
问题是这样的。实现数据的单项绑定

//左侧模板类目
  var itemTmpl = `<div class="menu-item">
                    <img class="img" src="$picture" />
                    <div class="menu-item-right">
                      <p class="item-title">$name</p>
                      <p class="item-description">$description</p>
                      <p class="item-zan">$praise_content</p>
                      <p class="item-price">￥$min_price<span class="unit">/$unit</span></p>
                    </div>
                    <div class="select-content">
                      <div class="minus"></div>
                      <div class="count">$chooseCount</div>
                      <div class="plus"></div>
                    </div>
                  </div>`
//这里因为外面穿入了data，我们就不自己get了
function getList(data){
    var list =data;
    initRightList(list);
}
//渲染列表 parma array 就是spus
function initRightList(list){
  $('.right-list-inner').html('');
  list.forEach((item, index) => {
    if(!item.chooseCount){
      item.chooseCount = 0;  //在这里创建的chooseCount
    }
    var str = itemTmpl.replace('$picture', item.picture)
                      .replace('$name', item.name)
                      .replace('$description', item.description)
                      .replace('$praise_content', item.praise_content)
                      .replace('$min_price', item.min_price)
                      .replace('$unit', item.unit)
                      .replace('$chooseCount', item.chooseCount);
    var $target = $(str);
    $target.data('itemData', item);
    $('.right-list-inner').append($target);   
  });
}
//渲染title parma array
function initRightTitle(str){
  $('.right-title').text(str);
}
//给按钮绑定点击事件
function addClick(){
  $('.menu-item').on('click', '.plus', (e) => {
    var $count = $(e.currentTarget).parent().find('.count');
    $count.text(parseInt($count.text() || '0') + 1);
    var item = $(e.currentTarget).parents('.menu-item').first();//用first是因为可能是一个数组
    var itemData = item.data('itemData');
    itemData.chooseCount = itemData.chooseCount + 1;
    console.log('我为这个项目添加了chooseCount', itemData);
    console.log('我是更改了之后的总数据window.food_spu_tags', window.food_spu_tags);
    window.ShopBar.renderItems();
  });
  $('.menu-item').on('click', '.minus', (e) => {
    var $count = $(e.currentTarget).parent().find('.count');
    if($count.text() == 0) return;
    $count.text(parseInt($count.text() || '0') - 1);
    var item = $(e.currentTarget).parents('.menu-item').first();//用first是因为可能是一个数组
    var itemData = item.data('itemData');
    itemData.chooseCount = itemData.chooseCount - 1;
    window.ShopBar.renderItems();
  });
}

function init(data){ //这里的data指的是food_spu_tags，也就是list
  getList(data.spus || []);
  initRightTitle(data.name || '');
  addClick();
}
//不能直接用init()的原因是，如果用了就会直接调用，但此时init的data还没传入 
window.Right = {
  refresh: init
}

注意那个点击事件，点击完后就调用了shopbar.js
代码如下

//顶部模板字符串
  var itemTopTmpl = `<div class="choose-content">
                    <div class="content-top">
                      <div class="clear-car">清空购物车</div>
                    </div>
                  </div>`;
//底部模板字符串
 var itemBottomTmpl = `<div class="bottom-content">
                      <div class="shop-icon">
                        <div class="dot-num hide">1</div>
                      </div>
                      <div class="price-content">
                        <p class="total-price">￥<span class="total-price-span">0</span></p>
                        <p class="other-price">另需配送&nbsp;￥<span class="shipping-fee">0</span></p>
                      </div>
                      <div class="submit-btn">去结算</div>
                  </div>`;           

var $strBottom = $(itemBottomTmpl); 
var $strTop = $(itemTopTmpl);

function init(data){ 
  $('.shop-bar').append($strTop);
  $('.shop-bar').append($strBottom);
}
function renderItems(){
  $strTop.find('.choose-item').remove();
  var list = window.food_spu_tags || [];
  var tmpl = `<div class="choose-item">
                <div class="item-name">$name</div>
                <div class="price">￥<span class="total">$price</span></div>
                <div class="select-content">
                  <div class="minus"></div>
                  <div class="count">$chooseCount</div> 
                  <div class="plus"></div>
                </div>
              </div>`
  var totalPrice = 0;
  list.forEach((item, index) => {
    item.spus.forEach((_item) => {
      //如果有菜品数量大于0就开始渲染这条数据
      if(_item.chooseCount > 0){
        //计算每个菜品的总价就是单价x数量
        var price = _item.min_price*_item.chooseCount;
        var row = tmpl.replace('$name', _item.name)
                      .replace('$price', price)
                      .replace('chooseCount', _item.chooseCount);
        // 计算整个总价
        totalPrice += price;
        var $row = $(row);
        $row.data('itemData', _item); //这里的row就是改了数据的tmpl，是div.choose-item
        $strTop.append($row);
      }
    })
  });
}
window.ShopBar = {
    renderItems: renderItems
}
init();

我觉得很奇怪的点在上面那个JS的点击事件，他不是复制了一个IitemData等于jquery对象里传递过来的数据了吗，但之后改动他为什么前面暴露出来的window_spu_tags会变啊，是因为深浅拷贝的原因吗，有人能帮我细讲吗，如果要变成深拷贝应该怎么改？

Answer 1

https://blog.csdn.net/qq_37860930/article/details/82628751