javascript - 在 Chris Coyer 的自定义事件示例中使用 call()

Question

我刚刚浏览了 Chris Coyer 的自定义事件示例，并遇到了以下代码:

$.fn.faq = function(options) {

    return this.each(function(i, el) {

      var base = el,
              $base = $(el);

          console.log(options);

      base.init = function() {
        // Do initialization stuff
            $base
               .find("dd")
               .hide()
               .end()
               .find("dt")
               .click(function() {

                 var ans = $(this).next();

                 if (ans.is(":visible")) {
                   base.closeQ(ans); 
                 } else {
                   base.openQ(ans); 
                 }

               })
      };

      base.openQ = function(ans) {
        // Open panel
                ans.show();

        // Do callback
        options.qOpen.call();
      };

      base.closeQ = function(ans) {
        // Open panel
                ans.hide();

        // Do callback
        options.qClose.call();
      };

      base.init();

    });

};

$("dl").faq({
  qOpen: myQuestionOpenCallback,
  qClose: myQuestionCloseCallback
});

function myQuestionOpenCallback() {
  alert("answer opened!");
}

function myQuestionCloseCallback() {
  alert("answer closed!");
}

我指的是 Chris Coyer 的帖子:

Custom event by Chris Coyer

Fiddle here

现在我的问题是为什么在这段代码中 JavaScript call() 显然没有被用来设置 this 的值，那么为什么要使用 call 呢？这是一个好的 JS 实践吗？或者这只是作者的选择，因为如果我在下面两行代码 I.E. :

options.qOpen.call();

options.qClose.call();

如果改为

options.qOpen();

options.qClose();

我的插件仍然可以正常工作，为什么要使用 call()？

我是 JS 和 jQuery 的新手。

Answer 1

它只是防止作为回调传递给选项对象的函数修改或访问选项对象。

function myQuestionOpenCallback() {
  alert("answer opened!");
  console.log(this); // window
}

function myQuestionCloseCallback() {
  alert("answer closed!");
  console.log(this); // window
}

如果没有 .call()，它会是这样的:

function myQuestionOpenCallback() {
  alert("answer opened!");
  console.log(this); // {qOpen: function, qClose: function}
}

function myQuestionCloseCallback() {
  alert("answer closed!");
  console.log(this); // {qOpen: function, qClose: function}
}

我认为没有理由这样做(在您的特定情况下)，因为使用该插件的人已经拥有对所述选项对象的完全访问权限。

var opts = {
  qOpen: myQuestionOpenCallback,
  qClose: myQuestionCloseCallback
}
$("dl").faq(opts);
function myQuestionOpenCallback() {
  alert("answer opened!");
  console.log(opts); // {qOpen: function, qClose: function}
}

function myQuestionCloseCallback() {
  alert("answer closed!");
  console.log(opts); // {qOpen: function, qClose: function}
}