jQuery设置方法的范围

Question

我只是想知道这样的事情是否可以实现：

假设我在我的库中定义了一个事件回调：

var app = {
        globals: {
            foo: null
        },
        bar: function(e) {
            e.preventDefault();
            e.stopPropagation();
            if (typeof app.globals.foo === "function") app.globals.foo(e);
        },
        init: function(options) {
            $.extend(app.globals, options);
            $(".myclass").on("click", function(e) {
                app.bar(e);
            });
        }
    };

    $(document).ready(function() {
        app.init({
            foo: function(evt) {
                alert("clicked");
                console.log(evt.target);
            }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass">Click Me!</div>

使用此方法，我将“.myclass”元素的点击事件数据传递给app.foo，因此将执行面向对象的方法。

TL;DR: 问题是，我可以将 foo 的范围设置为发送点击事件的对象吗？所以：

app.init({
   foo: function(){
       console.log(this);
   }
});

将被执行为：

app.init({
   foo: function(evt){
       console.log(evt.target);
   }
});

这样的事情可能吗？

Answer 1

您可以在激活时控制foo 函数的this 值：

// ...
if(typeof app.globals.foo === "function") app.globals.foo.call(e.target);
// ...

将this 设置为等于e.target，你会得到你描述的行为，但是......

这样做不是一个好习惯。首先，如果foo 绑定到特定的this（例如通过foo.bind(someContext)，此方法将无法覆盖该上下文。其次，当没有真实的对象上下文时，拥有this 上下文是不自然的——就是这样函数参数用于。这个（通常在 jQuery 回调中发现）的“常见异常”是将上下文传递给“隔离”回调函数，而不是“对象方法”，即使这样也很难证明这一点，因为同样的原因，函数参数更清晰，更不脆弱。