用于存储和使用数据的 Javascript 函数(类型)

Question

我以前确实从未使用过 javascript 函数类型或类，我了解 Java 和 Python，但不懂 javascript。所以，我建立了一个这样的类:

function FormStore (type) {

    this.setup = () =>{
        this.store = {};
        this.ERR_LINE_PREFIX = '#err_';
        this.NO_DISPLAY_CLASS = 'no-display';
        this.settings = {
            'myID':{'hide':false},
        }
    }

    this.checkVal= () => {
        var geoArr = ['id_xx','myID', (...)];
        var id;
        $.each( geoArr, function(val) {
            id = geoArr[val];
            console.log(this.store) //-> returns undefined, below line is error
            if (!(this.store[id])) { 
                return false;
            }

        });
};

var FS = new FormStore();
FS.setup();

存储区由 document.ready 上的组件填充。有一个函数可以查找对齐的组件(字形、标签、输入)是否具有某些类或值，并且特定组件填充一个字典:{label:false,glyph:false, input:false}。然而，由于某种原因，这并不重要。即使我立即(在设置中)向存储中输入一些值或动态创建它们，在 checkVal 中存储也不存在，它是未定义的。

请问有人，我对这里的 javascript 类型和类有什么不理解的地方吗？我在谷歌上搜索了很多，并试图找到好的资源，但是，“javascipt 变量类”(或类型)只会产生大量 DOM 操作。

Answer 1

编辑

checkVal 中存在上下文问题，您正在使用非箭头(且未显式绑定(bind))回调函数并尝试访问其中的 this。也将其更改为箭头函数，父上下文 (this) 将被保留:

$.each( geoArr, (val) => {
    id = geoArr[val];
    console.log(this.store)
    if (!(this.store[id])) { 
        return false;
    }
});

当您更改该部分时，它不会起作用。您将无法访问 $.each 的返回值。您应该依靠 native 数组 API 来完成此任务，并使用 Array.every 来确定所有 geoArr 商品是否都在商店中(假设这是您的目标):

// returns false if not all geoArr items are in the store
geoArr.every(id => this.store[id])

原创

我没有看到您在任何地方调用 checkVal() ，但根据您收到的错误，它是在 setup() 之前调用的(因为 setup 初始化存储)。您可以通过将 this.store = {} 移出设置(位于顶部)来立即解决该问题，例如:

function FormStore(type) {
   this.store = {};
   ...

话虽如此，我建议要么在原型(prototype)上定义方法，要么利用 ES6 类。这是两者的简化版本:

ES5 类

function FormStore(type) {
   // make sure user didn't forget new keyword
   if (this === window) { 
      throw new Error('FormStore must be called with "new" keyword')
   }
   // initialize state, this is the constructor
   this.type = type;
   this.store = {};
   // any other state the class manages
}

FormStore.prototype = {
   setup: function() {
      // do setup stuff
      // "this" points to instance
      console.log('setup', this.type)
   },
   checkVal: function() {

   }
}

var formStore = new FormStore('foo')
console.log(formStore.store) // <-- not undefined
formStore.setup()

ES6 类

class FormStore {
   constructor(type) {
      this.type = type;
      this.store = {};
   }
   setup() {
      console.log('setup', this.type)
   }
   checkVal() {

   }
}

const formStore = new FormStore('bar')
console.log(formStore.store) // <-- not undefined
formStore.setup()