Javascript调用同一对象内的对象方法工作不正常

Javascript Calling object methods within same object not working well

本文关键字：对象 方法 工作 不正常 Javascript 调用      更新时间：2023-09-26

在这个theme对象中，我创建了两个属性。

我将this.changeThemeTo(1);放在事件侦听器下，然后它就工作了。但我想把它放在if标签中

但当将其放入if时，似乎出现了错误

未捕获类型错误：this.changeThemeTo不是函数

请帮助解决此问题。谢谢 

var theme = {
    changeThemeTo: function (theme_value) {
        sessionStorage.removeItem('THEME'); // remove old theme from session storage
        if (theme_value == 0) {
            sessionStorage.setItem("THEME", 'dark');
        } else if (theme_value == 1) {
            sessionStorage.setItem("THEME", 'light');
        }
        document.body.className = sessionStorage.getItem("THEME");
    },
    init: function () {
        document.body.classList.add("fade");
        setTimeout(function () {
            document.body.classList.remove("fade");
        }, 100);
        var themes = ['dark', 'light'];
        themes.forEach(function (item) {
            var button = document.querySelector("." + item);
            if (button) {
                button.addEventListener("click", function () {
                    if (item == "dark") {
                        this.changeThemeTo(0);
                    } else if (item == "light") {
                        this.changeThemeTo(1);
                    }
                });
            }
        }, this);
    }
}
window.onload = function () {
    theme.init();
}

这里是我的html代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .dark {
    background-color: #191919;
    color: #EEEEEE;
}
.light {
    background-color: #EEEEEE;
    color: #191919;
}
</style>
</head>
<body>
<div id="change-theme">
    <a href="javascript:;" class="dark">DARK</a>
    <a href="javascript:;" class="light">LIGHT</a>
</div>
</body>
</html>

使用self.changeThemeTo而不是this.changeThemeTo。并根据下面的代码示例定义self-this。还优化了部分代码。

var theme = {
    changeThemeTo: function (theme_value) {
        sessionStorage.setItem("THEME", theme_value);
        document.body.className = theme_value;
    },
    init: function () {
        document.body.classList.add("fade");
        setTimeout(function () {
            document.body.classList.remove("fade");
        }, 100);
        var themes = ['dark', 'light'];
        var self = this;
        themes.forEach(function (item) {
            var button = document.querySelector("." + item);
            if (button) {
                button.addEventListener("click", function () {
                     self.changeThemeTo(item);
                });
            }
        }, this);
    }
}
window.onload = function () {
    theme.init();
}
 <style type="text/css">
    .dark {
    background-color: #191919;
    color: #EEEEEE;
}
.light {
    background-color: #EEEEEE;
    color: #191919;
}
</style>
<div id="change-theme">
    <a href="javascript:;" class="dark">DARK</a>
    <a href="javascript:;" class="light">LIGHT</a>
</div>

相关文章：