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上的组件填充。如果对齐的组件（字形，标签，输入）具有某些类或值，并且特定组件填充dict：{label：false，glyph：false，input：false}，则有一个函数可以查找。但是，出于某种原因，它并不重要。即使我立即在商店中输入一些值（在设置中）或动态创建它们，在checkVal中商店也不存在，它是未定义的。

请任何人，我在这里对javascript类型和课程有什么不了解？我正在谷歌搜索这个很多，并试图找到好的资源但是，＆＃34; javascipt变量类＆＃34; （或者输入）只会产生很多DOM操作。

Answer 1

修改

checkVal中存在上下文问题，您正在使用非箭头（并未明确绑定）回调函数并尝试访问其中的this。将其更改为箭头函数，并保留父上下文（this）：

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

当你改变那个部分时，它不会起作用。您将无法访问$.each的返回值。您应该依赖本机数组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 = {}; ...

话虽如此，我建议在原型上定义你的方法，或者使用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()

Answer 2

与范围有关。 $.each中的checkVal具有正常功能。在函数内部，this的范围不同。如果要保留原始范围，可以像定义方法时那样使用胖箭头函数。

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

当您运行原始代码并在console.log的行上放置断点时，您可以在检查器中看到this设置为Window对象而不再指向FormStore }。

Answer 3

@RestClientTest

工作得很好，你提供的代码有一个缺失的括号，你使用了一些破坏的es6语法

Javascript函数（类型）存储＆amp;使用数据

3 个答案: