技术帝的平台展示,网站建设、网站推广、SEO技术、网站优化、电子商务推广、平面美工和软件测试等技术干货分享。

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

建站技术 abel-lan 33℃ 0评论

概述

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

问题描述

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

js对象变量直接复制 = 引用
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通过对象属性来复制,避免直接复制造成变量覆盖
修改代码后运行结果(js通过对象属性来复制,避免直接复制造成变量覆盖)

扩展 – JavaScript中值的类型

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

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

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

赞 (6)支付宝扫码打赏微信扫码打赏分享
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址