javascript - 将代码片段转换为 JavaScript 中的方法

Question

这个问题已经有答案了:

What is the scope of variables in JavaScript? (27 个回答)

已关闭 9 年前。

目前，我想将我的代码保留在对象中，我想将单击事件的内容转换为方法，但不太确定这是如何完成的。当前的代码如下所示:

当前 JS

init: function(){

            var _this = this,
                slides_li = _this.els.slides.children(),
                large = 260,
                small = 60;

            // Hover
            slides_li.on('mouseover', function(){
                $(this).stop(true, true).animate({ opacity: 1 }, 300);
            }).on('mouseout', function(){
                $(this).stop(true, true).animate({ opacity: .8 }, 300)
            });

            // Click handlers
            slides_li.on('click', function(){

//想要将此代码移至其自己的方法toggle_slides() ??

                $('.active', _this.els.slides).not(this).animate({
                    width: small
                }, 300).removeClass('active');
                // animate the clicked one

                if ( !$(this).hasClass('active') ){
                    $(this).animate({
                        width: large
                    }, 300).addClass('active');
                }                
            });                 
        }

但我希望代码看起来像这样，但我知道我错过了一些关键的东西，而且这显然并不意味着单击事件:

JS

init: function(){

            var _this = this,
                slides_li = _this.els.slides.children(),
                large = 260,
                small = 60;

            // Hover
            slides_li.on('mouseover', function(){
                $(this).stop(true, true).animate({ opacity: 1 }, 300);
            }).on('mouseout', function(){
                $(this).stop(true, true).animate({ opacity: .8 }, 300)
            });

            // Click handlers
            slides_li.on('click', function(){
                toggle_slides(); //pass in this?
            });                 
        },
        toggle_slides: function(){ // add argument for this?
               $('.active', _this.els.slides).not(this).animate({
                    width: small
                }, 300).removeClass('active');
                // animate the clicked one

                if ( !$(this).hasClass('active') ){
                    $(this).animate({
                        width: large
                    }, 300).addClass('active');
                }                
        }

任何人都可以就如何实现这项工作提供一些建议吗？

Answer 1

问题在于“this”的值始终依赖于上下文。

首先，关于原始代码如何工作的说明:

最初调用 init() 时，this 引用父对象 (gep)。但在单击事件处理程序中，this 指的是单击的元素。为了让您仍然可以在点击处理程序中访问父级，您可以将“this 的父级值”捕获到 _this 中，以便稍后使用它 - 并且一切正常。

但是当您将处理程序中的代码移至单独的方法中时，很多事情都会发生变化:

• 首先，small、large 等变量不再位于局部作用域内，因此必须重新定义或作为参数导入。

• this 现在再次引用父元素，因为现在执行的方法不是事件处理程序，而是父元素上的方法。所以旧代码中引用_this可以在新代码中直接使用this。

• 最后，在旧代码中，在事件处理程序中，this 引用被单击的元素。但是(见上文)在新方法中，这意味着不同的东西:“父”对象。因此，我们需要一个参数来捕获单击的元素 - 我已将其作为 el 参数传递，并且旧代码中对 this 的引用也会相应更改。

所以真正需要注意的是:这段代码属于哪个对象？如果您将属于一个对象的代码移动到另一个对象 - 例如。从一个对象上的事件处理程序到另一个对象上的方法 - 您可能需要根据需要重新处理/重命名任何 this 或类似的变量。

更新代码的带注释副本如下，也可作为 jsfiddle 获取:

...
        // Click handlers
        slides_li.on('click', function(){
            // pass 'this' - the clicked element - as the el param; also small and large.
            gep.toggle_slides(this, small, large);
        });                 
    },

    toggle_slides: function(el, small, large){
           // '_this' in old code in handler replaced with 'this';
           // 'this' in handler code replaced with 'el' here
           $('.active', this.els.slides).not(el).animate({
                width: small
            }, 300).removeClass('active');
            // animate the clicked one

            // 'this' in handler code replaced with 'el'here
            if ( !$(el).hasClass('active') ){
                $(el).animate({
                    width: large
                }, 300).addClass('active');
            }                
    }