Question

我在jquery脚本后面看到某个地方，我想要理解这个脚本我对以下代码感到困惑，首先为什么要创建var self为什么不在这里使用关键字this $( '.some-class' ).on( 'click', 'a#some-link', self, this.bar.create );

当此代码也正常工作时，为什么要使用第三个参数self：

$( '.some-class' ).on( 'click', 'a#some-link', this.bar.create );

查看示例代码：

    ;(function($) {
            'use strict';

            var Foo = {

                initialize: function() {
                    var self = this;

                    $( '.some-class' ).on( 'click', 'a#some-link', self, this.bar.create );
                },
                bar: {
                       create: function(e) {

                      }
               }
            };

            $(function() {
                    Foo.initialize();
            });

     })(jQuery);

Answer 1

所以on参数是：

.on( events, selector, data, handler )

所以在event.data中，对象的引用就在那里。

当你离开自我时，这意味着event.data将没有该对象。因此，如果代码由于某种原因需要该引用，则不会存在。

$(document.body).on("click", "div", {pickle: "yes"}, function (event) {
  console.log(event.data); //{pickle: "yes"}
});

Answer 2

在事件触发成员函数时，通常需要一个上下文。

例如，考虑一下这个稍微修改过的代码版本：

// Your object
var Foo = { 
    initialize: function() {
        // VERSION 1:
        window.addEventListener("customEvent", this.bar.create);
        // VERSION 2:
        window.addEventListener("customEvent", this.bar.create.bind(this));
    }, 
    bar: {
        create: function() {
            console.log(this);
        }
    }
};

现在你可以像这样明确地调用你的函数：

Foo.bar.create();
// >> log your Foo object

或使用事件触发

Foo.initialize();

// Send your event
var e = new Event("customEvent");
window.dispatchEvent(e);
// VERSION 1 will output window object
// VERSION 2 will output your Foo object

这是因为在版本1中，当您的函数被触发时，它在附加事件时没有其上下文的记忆（这是预期的行为）。 this确实会绑定到默认对象（window）。

在版本2中，我将函数显式绑定到其上下文，因此this将绑定到Foo对象。

现在关于jQuery.on：

此第3个参数仅表示事件的.data属性。这意味着编码它的人想要引用Foo对象。如果你.bind(this)这个函数你应该能够避免将它作为参数传递。

像这样：

...
initialize: function() {
    $( '.some-class' ).on( 'click', 'a#some-link', this.bar.create.bind(this) );
},
...

理解jquery .on（）方法第三个参数和var self = this

2 个答案: