Question

今天早些时候，我得到了一些简单的代码，允许图像在鼠标悬停时滑过，并决定尝试将其转换为类，以便我可以实例化它。但是，我遇到了一些问题。

在窗口加载时调用init（），它将shifttabout（）设置为在鼠标悬停在图像上时调用的函数。但是，当调用shifttabout（）时，我收到以下错误：＆＃34; this.movetabout不是函数。＆＃34;怎么会这样？

   <script type="text/javascript">

        function SlidingTab(img)
        {
            this.self = this;

            this.outtimer;
            this.intimer;

            this.left = 0;
            this.interval = 20;
            this.animatingout = false;
            this.animatingin = false;
            this.increment = 10;
            this.extenddist = 100;
            this.imgobj = img;


            this.movetabout = function(){
                alert("moveout");
                this.animatingout = true;
                this.left = parseInt(this.imgobj.style.left);

                if(this.left != this.extenddist)
                {
                    this.imgobj.style.left = this.left + this.increment + 'px';

                    this.self = this;
                    this.outtimer = setTimeout(this.self.movetabout, this.interval);
                }
                else
                {
                    this.animatingout = false;
                }
            };

            this.shifttabout = function(){
                alert("shiftout");
                if(this.animatingin)
                {
                    this.animatingin = false;
                    clearTimeout(this.intimer);
                }
                if(!this.animatingout)
                {
                    this.movetabout();
                }   
            }

            this.init = function(){
                this.imgobj.style.position = 'relative';
                this.imgobj.style.left = '0px';

                this.self = this;

                this.imgobj.onmouseover=this.self.shifttabout;
            }
        }

        function init(){
            var img1 = document.getElementById("tab1");
            var tab1 = new SlidingTab(img1);
            tab1.init();
        }

        window.onload = init;

    </script>

据推测，我在某种程度上错误地设置了onmouseover函数，因为当鼠标悬停调用时，所有类变量看起来都是未定义的或者在shifttabout（）中搞乱，但是当它是时不是通过init（）直接调用。

Answer 1

你的问题看起来是由这些线引起的。您正走在正确的轨道上，因为您需要正确设置功能的上下文。

this.self = this;

this.imgobj.onmouseover=this.self.shifttabout;

将其更改为以下内容应正确设置上下文

this.imgobj.onmouseover=this.shifttabout.bind(this);

#bind(this)将函数内this的范围设置为传递它的输入（在本例中为当前范围）

Answer 2

您在this中使用的shifttabout是指shifttabout this - 而不是SlidingTab this。

您应该将shifttabout外部所需的变量传递到其中以便正确使用它们。

希望有所帮助。

在一个班级

2 个答案: