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

我看到jquery脚本后面的某个地方，我想了解这个脚本。
我对下面的代码感到困惑，首先，为什么不在这里使用关键字

this

（“.some class”）。在（'click'，'a#some link'，self，this.bar.create）

第二，为什么要使用第三个参数

self

，而该代码也可以正常工作：

$（'.some class'）。打开（'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);

因此，有关论点如下：

.on( events, selector, data, handler )

因此在
event.data
中，对象的引用就在那里

当您离开self时，这意味着event.data将不具有该对象。因此，如果代码出于某种原因需要该引用，它就不会存在

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

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

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

// 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中，当您的函数被触发时，当您附加事件（这是预期的行为）时，它没有上下文的内存<代码>此

确实将绑定到默认对象（

窗口

）

在版本2中，我显式地将函数绑定到它的上下文，因此

这个
将绑定到Foo对象


现在介绍jQuery.on：

第三个参数仅表示事件的
.data
属性。这意味着编码这个的人想要一个对Foo对象的引用。
如果您
.bind（this）
函数，您应该能够避免将其作为参数传递

像这样：

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

在这种情况下，self/这个并不重要……因为有人不知道他们在做什么
self
很可能就是
这个
，也可能是省略了它，用arrow函数或.bind解决了同样的问题。初始语句的进一步执行是使用选择器。nice解释！！