Question

为什么我的变量在类函数内部无法访问？

2017-08-05

142

javascript

我尝试从类函数更改构造函数中定义的变量的值。当我尝试更改或打印它时，我得到的所有内容都是：

Uncaught TypeError: Cannot set property 'daysNumber' of undefined

我不确定，但我认为这可能是因为以不寻常的方式调用此函数而发生的。

我根据构造函数中获得的选项调用函数。因此，如果其中一个选项是 weekends ，则调用的函数是 setWeekends 。

错误发生在 setWeekends 函数内部。

"use strict";

class Calendar{
    constructor(element, params){
        this.element = element;
        this.params = params;
        this.parseParams();
        this.date = new Date();
        this.days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
        this.teachingHoursRange = ['7:10-7:55', '8:00-8:45', '8:50-9:35', '9:45-10:30', '10:50-11:35', '11:40-12:25', '12:30-13:15', '13:20-14:05', '14:10-14:55', '15:00-15:45'];
        // How many days will be displayed
        this.daysNumber = 5;
        // How many hours will be displayed
        this.teachingHoursNumber = 10;
        this.init();
    }

    init(){
        // Some important code
    }

    parseParams(){
        // Look for all parameters in this.params
        for (let key in this.params){
            // Make the first char capitalize
            let capitalizedKey = key.charAt(0).toUpperCase() + key.substr(1).toLowerCase();
            let functionName = "set" + capitalizedKey;

            // Look for member function set by function name
            let fn = this[functionName];

            // If fn is function, call it
            if (typeof fn === 'function') fn(this.params[key])

        }
    }

    setWeekends(value){
        if(value === true)
            this.daysNumber = 7
    }
}

这是我调用此类的源代码。它在不同的 .js 文件中。

let calendar = new Calendar("calendar", {
    weekends: true
});

Answer 1

在 parseParams() 中调用函数时需要传递上下文。您可以使用 .call() 方法调用该函数来实现这一点。

parseParams(){
    // Look for all parameters in this.params
    for (let key in this.params){
        // Make the first char capitalize
        let capitalizedKey = key.charAt(0).toUpperCase() + key.substr(1).toLowerCase();
        let functionName = "set" + capitalizedKey;

        // Look for member function set by function name
        let fn = this[functionName];

        // If fn is function, call it
        if (typeof fn === 'function') fn.call(this, this.params[key])

    }
}

Answer 2

将 setWeekends 方法更改为

setWeekends = (value) => {
    if(value === true)
        this.daysNumber = 7
}

Ali Faris

2017-08-05

Answer 3

尝试一下

parseParams(){
     let vm = this;
        // Look for all parameters in this.params
        for (let key in this.params){
            // Make the first char capitalize
            let capitalizedKey = key.charAt(0).toUpperCase() + key.substr(1).toLowerCase();
            let functionName = "set" + capitalizedKey;

            // Look for member function set by function name
            let fn = this[functionName];

            // If fn is function, call it
            if (typeof fn === 'function') fn(vm, this.params[key])

        }
    }


setWeekends(vm, value){
        if(value === true)
            vm.daysNumber = 7
    }