Jquery:理解语法

Question

我正在关注来自tutsplus的Jquery视频讲座.在讲座教师使用此代码显示/隐藏按钮单击时的联系表单

var ContactForm = {
  container: $('#contact'),

  init: function(){
    $('<button></button>', {
      text:"Contact Us"
    })
    .insertAfter('article')
    .on('click', this.show);
  },

  show: function () {
    ContactForm.close.call(ContactForm.container);
    ContactForm.container.show();
  },

  close: function() {
    var $this = $(this);

    console.log($this);

    $('span.close').on('click',function (){
      $this.hide();
    });
  }
};

我无法得到讲师解释这几点的内容,所以如果你能帮助我理解这个语法

init :function (), //  i  know about anonymous or named functions only

• 我们如何使用ContactForm访问close/show.
• 当我们说this.show(在处理程序中)和.时,差异是什么？ $(this).show

Answer 1

实际上,init: function() { }根本不是匿名功能.我会尽力回答你问题的很多部分.

ContactForm是一个对象,因此具有可以通过JS访问的属性和方法.例如,您可以使用其文字名称从对象外部访问show()和close()方法,例如:

ContactForm.show();
ContactForm.close();

由于它是一个对象,您也可以使用其中的this关键字来引用它.例如,如果show()要从方法内部调用init()方法,则可以执行以下操作:

var ContactForm = {
    init: function() 
    {
        this.show(); // using this keyword.
    },

    show: function() 
    {

    },

    close: function()
    {

    }
}

在这个特定的例子中,this=== ContactForm.但是,您指定的语法$(this)用于从DOMElement对象创建jQuery对象(或集合).例如,假设您希望将回调函数绑定到元素的click事件:

$('a').on('click', function() {  
    $(this) // <-- This now holds a jQuery object representing the clicked element
});

所以,记住所有这些:

在该show()方法中,第一行调用对象的close()方法ContactForm.代码使用了Function的prototype call()方法,它允许我们指定this函数内部的值.所以,在以下行:

ContactForm.close.call(ContactForm.container);

代码正在ContactForm.container向该close()方法发送(这是一个jQuery对象),因此可以通过以下方式访问它this:

var $this = $(this);

在close()方法内部,this现在=== $('#contact')而不是 ContactForm.