JS全局变量冲突，多次重复引用含有同一变量命名脚本时变量冲突

概述

项目中需要多次动态加载外部js脚本文件，导致全局变量冲突，新加载的变量总是覆盖之前的同名变量。当我们获取每次动态加载脚本的变量时，就要特别注意变量赋值的问题，区分变量类型为基本类型还是引用类型。

问题描述

最近开发的项目中，需要通过动态加载不同的js脚本获取不同的基金净值数据，每个文件中的基金变量名称都是相同。我们通过代码let a = {}; a = window;得到基金a的所有数据，之后再次加载b基金，回到a的数据也变成b的。运行结果如下图：

js对象变量直接复制 = 引用

解决方法

该问题是由于window作为一个对象数据类型，我们直接赋值给a，其实是将a指向window对象的地址，而非将window对象的所有内容复制给a。举个简单例子解释下：

let a = {value: 'Hello World'};
let b = a; // b引用a
a.value = 'Good morning'; // 修改a对象属性，b的属性也会更改
console.log(b.value); // 输出Good morning

如何解决该问题呢，很简单。我们在每次加载的脚本时，通过window对象获得所有数据后，将需要处理的对象属性值复制给基金a对象，下边是我写的获取基金数据代码：

function getDataByJS(url,JSID){
  let fundData = document.createElement("script");
  fundData.type = "text/javascript";
  fundData.src = url;
  fundData.id = JSID;
  if (!document.getElementById(JSID)) {
    document.getElementsByTagName("head")[0].appendChild(fundData);
  }
  setTimeout(function () {
    if (window.fS_code === JSID) {
      /*global_var.newNetfundData[JSID] = window; // window作为一对象数据类型，这样赋值其实是引用*/      global_var.newNetfundData[JSID] = {
        fS_code: window.fS_code,
        Data_netWorthTrend: window.Data_netWorthTrend,
        Data_ACWorthTrend: window.Data_ACWorthTrend
      };
    }
  }, 500);
}

修改代码后运行结果（js通过对象属性来复制，避免直接复制造成变量覆盖）

扩展 – JavaScript中值的类型

JavaScript中的值分为2大类：基本类型和引用类型。
基本类型：数字(Number)、字符串(String)、布尔/Boolean(true和false)、Undefined、Null。
引用类型：函数、数组、日期、正则、错误。（注意：所有的引用类型都是对象，也就是Object对象下的一个类。）

对基本类型，是按值访问的，即通过值复制的方式来赋值和传递。对引用类型，是按引用访问的，即通过引用复制的方式赋值和传递。在操作对象时，实际上是在操作对象的引用，而不是实际的对象。

转载请注明：半亩方塘 » JS全局变量冲突，多次重复引用含有同一变量命名脚本时变量冲突