Question

我刚刚通过克里斯科尔斯的自定义事件示例，并遇到以下代码：

$.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!");
}

我是指chis coyers，这个特别的帖子：

custom event by chris coyer

小提琴here

现在我的问题是为什么在这段代码中javascript call（）显然没有被用来设置它的值，那么为什么调用被使用？这是一个很好的js练习吗？或者它只是作者的选择，因为如果我在以下两行代码中取消调用I.E. ：

options.qOpen.call();

options.qClose.call();

如果改为

options.qOpen();

options.qClose();

我的插件仍然正常，所以为什么使用call（）？

我是js和jquery的新手，所以请保持简单的解释。

谢谢。

亚历山大

Answer 1

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

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}
}

使用call（），在chris coyers自定义事件的例子中

1 个答案: