面向对象的Javascript中的“这个”

Question

我认为我目前编写了相当不错的 javascript，但正在尝试转向更面向对象的方法。我只是从这个开始，所以请原谅我的菜鸟。我正在将我的一些功能转移到对象上并遇到了这个问题。以前，我有一个手风琴功能是这样工作的：

jQuery(document).ready(function ($){

var accordionTrigger = $('.accordion-title');

function toggleAccordion() {
    // Set a variable for the accordion content
    var accordionContent = $('.accordion-container .accordion-content p');
    // Slide up any open content
    accordionContent.slideUp();
    // Remove any active classes
    accordionTrigger.removeClass("active");
    // If the sibling content is hidden
    if(!$(this).siblings().is(":visible")) {
        // slide it down
        $(this).siblings().slideDown();
        // add a class to the title so we can style the active state and change the svg
        $(this).addClass("active");
    }
}

accordionTrigger.on("click", toggleAccordion);

});

我已将其移至新设置中的对象，如下所示：

Accordion = {
accordionContent: '.accordion-container .accordion-content p',
accordionTrigger: '.accordion-title',
init: function() {
    jQuery(this.accordionTrigger).click(this.toggleAccordion.bind(this));
},
toggleAccordion: function() {
    // Slide up any open content
    jQuery(this.accordionContent).slideUp();
    // Remove any active classes
    jQuery(this.accordionTrigger).removeClass("active");
    // If the sibling content is hidden
    if(!jQuery(this.accordionTrigger).siblings().is(":visible")) {
        // slide it down
        jQuery(this.accordionTrigger).siblings().slideDown();
        // add a class to the title so we can style the active state and change the svg
        jQuery(this.accordionTrigger).addClass("active");
    }
}
}

    jQuery(document).ready(function ($){
       Accordion.init();
    });

我遇到的问题是“this”在面向对象的 Javascript 中的工作方式。在最初的设置中，我可以使用“this”来引用被点击的手风琴内容。我无法使用面向对象的方法访问它。有人可以帮帮我吗？

Answer 1

您可以使用event.target 引用触发事件的元素，或使用event.currentTarget 引用处理程序绑定的元素，相当于使用this。

toggleAccordion: function(event) {
    // Slide up any open content
    jQuery(this.accordionContent).slideUp();
    // Remove any active classes
    jQuery(this.accordionTrigger).removeClass("active");
    // If the sibling content is hidden
    if(!jQuery(event.currentTarget).siblings().is(":visible")) {
        // slide it down
        jQuery(event.currentTarget).siblings().slideDown();
        // add a class to the title so we can style the active state and change the svg
        jQuery(event.currentTarget).addClass("active");
    }
}

Learn more about event handling with jQuery.

Answer 2

问题不在于this 在 OOP JavaScript 上的工作方式，因为this 始终引用调用者对象。

您可以通过You Don't Know JS: this & Object Prototypes了解更多关于this的信息。

您确实可以像@Felix 所说的那样使用event.target 和event.currentTarget，但是如果您不了解如何正确使用this 或至少不了解它的工作原理，最终您会遇到麻烦。

Answer 3

@FelixKling 解决方案的另一种方法，删除 .bind() ，使用 event.data 来访问 accordionTrigger 处理程序中的 jQuery(this) 和 Accordion 对象

var Accordion = {
  accordionContent: '.accordion-container .accordion-content p',
  accordionTrigger: 'div',
  init: function() {
    // set `event.data` to `this`:`Accordion` at first parameter to `.click()`
    jQuery(this.accordionTrigger).click(this, this.toggleAccordion);
  },
  toggleAccordion: function(e) {
    // Slide up any open content
    // jQuery(e.data.accordionContent).slideUp();
    // Remove any active classes
    // jQuery(e.data.accordionTrigger).removeClass("active");
    // If the sibling content is hidden
    // `this`:`div`
    if (jQuery(this).is(e.data.accordionTrigger)) {
      console.log(this, e.data, $(e.data.accordionTrigger))
    }
  }
}
Accordion.init()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>
  click
</div>

Answer 4

在 toggleAccordion() 中，您仍然可以使用 $(this) 来获取已单击的手风琴标题元素。希望您能获得适当的手风琴内容。

首先像PHPglue所说的那样绑定它：

jQuery(this.accordionTrigger).click(this.toggleAccordion);

然后你可以通过 $(this) 来获取手风琴标题：

toggleAccordion: function() {
    var $accordionTitle = $(this);
}

基本上当你像这样绑定它并触发点击时，范围会发生变化，“this”不再是“Accordion”。

如果您需要访问手风琴内容和手风琴触发器，您可以将其传递给函数 toggleAccordion 或使用 Accordion.accordionContent 和 Accordion.accordionTrigger。

其他来源：http://api.jquery.com/click/#click-eventData-handler