Chris Coyer中call(）的用法'的自定义事件示例

Usage of call() in Chris Coyer's example of custom events

本文关键字：自定义 事件 用法 Coyer call Chris      更新时间：2023-09-26

我刚刚浏览了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("answerswer opened!");
}
function myQuestionCloseCallback() {
  alert("answerswer closed!");
}

我指的是Chris Coyer的帖子：

Chris Coyer 定制活动

在这里摆弄

现在我的问题是，为什么在这段代码中，JavaScript调用（）显然没有被用来设置这个值，那么为什么要使用调用呢？这是一个好的JS实践吗？或者这只是作者的选择，因为如果我取消了以下两行代码的调用

options.qOpen.call();
options.qClose.call();

如果更改为

options.qOpen();
options.qClose();

我的插件仍然运行良好，那么为什么要使用call（）呢？

我是JS和jQuery的新手。

它只是阻止作为回调传递到options对象的函数修改或访问options对象。

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

如果没有.call()，它将是这样的：

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

我认为没有理由这样做（在你的特定情况下），因为使用插件的人已经完全可以访问所述选项对象。

var opts = {
  qOpen: myQuestionOpenCallback,
  qClose: myQuestionCloseCallback
}
$("dl").faq(opts);
function myQuestionOpenCallback() {
  alert("answerswer opened!");
  console.log(opts); // {qOpen: function, qClose: function}
}
function myQuestionCloseCallback() {
  alert("answerswer closed!");
  console.log(opts); // {qOpen: function, qClose: function}
}
相关文章：