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

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

但是从执行结果来看,window.API这个对象里面的一些属性值总是含有上次的结果,不是每次都是新做成的对象。为什么?
image.png
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;
    }
}
回复
阅读 2.3k
5 个回答

你可以在 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 对象的深度拷贝
可解君忧

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

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

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

刚刚是了下,除了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;
},

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏