vue中给window添加一个属性，但是创建以后不能更新

Question

如图，我想着每次这个方法执行的时候，当传入空的话，
window.API就设置空
如果不是的话，就创建一个对象。

但是从执行结果来看，window.API这个对象里面的一些属性值总是含有上次的结果，不是每次都是新做成的对象。为什么？

api 是一个class

import {getUserParam,recordInitialize,scormUpdate} from '@/api'
import AES from 'crypto-js/aes'
import {crypto} from '@/utils/config';

export default class Scrom {
    constructor() {

        this.scoURLstr = "";
        this.scoUrl = "";
        this.width = "";
        this.height = "";

        this.userID = "";
        this.courseID = "";
        this.scoID = "";
        this.scoUrl = "";
        this.initialized; 这个俩个变量
        this.finished; 这个俩个变量

    }

    contentFirstStart(data) {

        this.scoURLstr = data.scoURLstr;
        this.scoUrl = data.scoUrl;
        this.width = data.width;
        this.height = data.height;

        this.userID = data.userID;
        this.courseID = data.courseID;
        this.scoID = data.scoID;
        this.contentTypeID = data.contentTypeID;

 
        this.contentStart(data.courseID, data.scoID, data.contentTypeID);
    }

    //他是方法
}

dataContent是一个常量。

const dataContent = {
  scoURLstr: "/student/learning/contentsFrameset.cfm",
  scoUrl: "",
  width: "1000",
  height: "700",

  userID: "5449",
  courseID: "94",
  scoID: "112",
  contentTypeID: "1",

  scoTotalNum: "2",
  scoLocation: "1",

  scoWidthList: "1000,1000",
  scoHeightList: "1000,1000",
  scoTypeList: "1,1",
  execScoState: "1,1",


  scorm_ver: " 1.2",
  pre_sco_exec: "1",

  manifestFlag: "10",
  nowLocation: "",
};

具体的问题

每次new的时候 constructor里面 这俩个变量应该初始是 undefined
this.initialized;
this.finished;

我new过一次以后再new，这俩个值就变成上次执行结果了

真是见鬼了，刚刚写了一个简单的class去测试的话，每次是可以new新的对象的。写法都明明一样。。。

export default class Test {
    constructor(){
        this.initialized; //这个俩个变量
        this.finished; //这个俩个变量
    }
    testRun(_a,_b){
        this.initialized = _a;
        this.finished = _b;
    }
}

Answer 1

你可以在 if 的上面插一个 debugger 或者 console.log 来观察这个函数是否每次都执行，毕竟按道理说确实每次执行都要把 API 重新赋值。

如果执行了的话不妨看一下 api 类的实现（或者后续对这个实例的操作），可能应用了类似单例模式的共享数据，导致重新 new 的对象共享了先前的对象的数据。

当然，如无必要，不建议在 window 上添加属性，这样很容易被外部监听和修改，尤其你起的属性名字和别人“心有灵犀”的时候，往往造成一些难以定位的问题。

---

const dataContent = () => ({
    scoURLstr: "/student/learning/contentsFrameset.cfm",
      scoUrl: "",
      width: "1000",
     height: "700",
    ...
})

// ...

window.API.contentFirstStart(dataContent());
// 当然这里也可以改成对 dataContent 对象的深度拷贝

可解君忧

Answer 2

是不是window.API.contentFirstStart(dataContent)里的dataContent数据是上一次的数据，未及时更新变化呢？

Answer 3

有类似问题的朋友吗，求帮忙呀。
debug看的话，window的api确实是null了。但是 window下面还有个widow

展开的话发现很奇怪的结构
圈1 为什么这个地方还有个API的对象
圈2.本来这些方法是我对象里面的，怎么成这样了？

刚刚是了下，除了window.API = null; 又加上的话 就可以了 window[0].API = null; 这是为什么呀。

togglePopup2(params) {


  if (params == "") {
    debugger;
    window.API = null;
    window[0].API = null;  // 加上这行代码就可以 了
    debugger;

  } else {
    debugger;
    window.API = new api();
    window.API.contentFirstStart(dataContent());
    debugger;
  }

  //3.受講画面表示
  this.scromVisible = params;
},

Answer 4

试试

Answer 5

换一个思路，如果将window.API理解成一个全局的状态、参数管理器，那这个window.API的功能应该可以被vue自家的vuex完全替代。