Question

我试图制作一个文本滑块，但结果很奇怪：

TypeError: HomeHeaderSlider.init is not a function

我还在学习es6 javascript。

以下是我的课程：

        import S from "skylake"

        class HomeHeaderSlider {

            init(e, t) {

            function i() {
                o.dataset.headerslider = h,
                t()
            }

            let o = S.Geb.id("h-header"),
                // some other variables

            "h-header-arrow-btn-left" === e.target.id ? (h = 0 === c ? 5 : c - 1, d = -1) : (h = c < 5 ? c + 1 : 0, d = 1)
            // some content

            }

        }

这是课程延伸......

        class HomeController extends HomeHeaderSlider {

            constructor(e) {
                super();
                S.BindMaker(this, ["addListeners", "getHomeHeaderSlider"]),
                this.RO = new S.RO({
                throttle: {
                    delay: 100,
                    atEnd: !0
                }
                })
            }
            init(e) {
                let t = this                    
                this.addListeners()
            }
            addListeners() {
                this.listeners("add")
            }
            listeners(e) {
                "add" === e ? this.RO.on() : this.RO.off(),
                S.Listen(".h-header-arrow-btn", e, "click", this.getHomeHeaderSlider)
            }
            getHomeHeaderSlider(e) {
                this.listeners("remove"),
                HomeHeaderSlider.init(e, this.addListeners)
            }
            destroy(e, t) {
                this.listeners("remove")
            }

        }

        console.log(h)
        // export default HomeHeaderSlider

        const slidctrl = new HomeController()
        slidctrl.init()
        export default HomeController

它sems代码不会调用HomeHeaderSlider.init函数。

我的问题是如何称呼它？

Answer 1

HomeHeaderSlider是你的班级。课堂上没有这样的函数HomeHeaderSlider.init()。 .init()方法位于HomeHeaderSlider.prototoype.init或HomeHeaderSlider的对象实例上。

在这种方法中：

        getHomeHeaderSlider(e) {
            this.listeners("remove"),
            HomeHeaderSlider.init(e, this.addListeners)
        }

目前还不完全清楚你在那里做什么。如果您要调用.init()的基类版本而不是HomeController版本，那么您可以使用super.init()，如下所示：

        getHomeHeaderSlider(e) {
            this.listeners("remove"),
            super.init(e, this.addListeners)
        }

看起来您可能在此行中绑定this时遇到问题：

 S.Listen(".h-header-arrow-btn", e, "click", this.getHomeHeaderSlider)

您需要将其更改为：

S.Listen(".h-header-arrow-btn", e, "click", this.getHomeHeaderSlider.bind(this))

这样，getHomeHeaderSlider()方法在调用时将具有this的正确值。当您将this.getHomeHeaderSlider传递给函数时，它会在this上查找，获取对getHomeHeaderSlider方法的引用，并仅传递对该方法的引用。当click处理程序稍后调用您的方法时，根本没有与正确对象的连接，因此this的值将丢失。使用.bind()我显示的方式可以确保this的正确值保持与方法调用的连接。将引用传递给某个对象的方法时需要这样做，该方法将被一些对您的对象一无所知的其他代理调用。

奇怪的es6扩展了类

1 个答案: