ES6 - 如何在绑定`this`类后访问`this`元素？

Question

如何在绑定this类后访问this元素？

例如，如果没有绑定this：

$(".button-open").click(function(event) { 
    console.log(this); // <a href="#" class="button-open">Open</a> 
    this.openMe(); 
}); 

随着结合this：

$(".button-open").click(function(event) { 
    console.log(this); // Polygon {windowHeight: 965, scrollNum: 0} 
    this.openMe(); 
}.bind(this)); 

我如何获得和访问<a href="#" class="button-open">Open</a>再结合this后？

全码：

class Polygon { 
    constructor() { 
     this.windowHeight = $(window).height(); 
     this.scrollNum = 0; 
    } 

    // Simple class instance methods using short-hand method 
    // declaration 
    init() { 
     var clickMe = this.clickMe.bind(this); 
     return clickMe(); 
    } 

    clickMe() { 
     $(".button-open").click(function(event) { 
      console.log(this); 
      this.openMe(); 
     }.bind(this)); 


     $(".button-close").click(function(event) { 
      this.closeMe(); 
     }.bind(this)); 
    } 

    openMe() { 
     console.log(this.scrollNum); // 0 
     this.scrollNum = 200; 
     console.log(this.scrollNum); // 200 
     return false; 

    } 

    closeMe() { 
     console.log(this.scrollNum); // 200 
     return false; 
    } 
} 

export { Polygon as default} 

任何想法？

编辑：

同样的问题与jQuery animate：

$(".element").animate({}, 'fast', 'swing', function(event) { 
    console.log(this); // the element 
}.bind(this)); 

结合后：

$(".element").animate({}, 'fast', 'swing', function(event) { 
    console.log(this); // undefined 
}.bind(this)); 

任何全球或防弹方式再次获得element的？

Answer 1

最好的选择是存储在一个变量的情况下，不覆盖this：

var context = this; 
$('.element').on('click', function(event) { 
    // context would be the this you need 
    // this is the element you need 
}); 

2.如果您只指定一个单一的元素，就可以从上面做反向和保存上要绑定的处理程序到一个变量，然后使用该变量的处理程序中的元素：

var el = $('.element'); 
el.on('click', function(event) { 
    // use el here 
}.bind(this)); 

既然你标记ŧ他ES6质疑，这可能是更好的上下文绑定的arrow function，因为使用bind比较冗长，并且还创建了一个附加功能：

var el = $('.element'); 
el.on('click', (event) => { 
    // this is the same as in the outer scope 
    // use el here 
}); 

另一种选择是使用的的target财产事件对象，但这也可以是元素内的任何子元素（目标是调度事件的元素，而不是绑定处理程序的元素），因此可能需要遍历DOM树以查找所需的元素，效率较低。

var el = $('.element'); 
el.on('click', ({ target }) => { 
    while (target.parentNode && !target.classList.contains('element')) { 
    target = target.parentNode; 
    } 
    // here the target should be the element you need 
}); 

Answer 2

如果您绑定您的处理程序，那么你仍然可以得到被点击通过event.target处理程序内的项目。

https://api.jquery.com/on/

作为替代方案，你可以简单地做

const self = this; 

或

const me = this; 

您的任何事件侦听器的声明之前，没有约束力的任何功能。然后在处理程序中，您可以使用this来引用当前元素，并使用self或me来引用父范围。

Answer 3

如果您没有使用.bind()，没有通用方法可以访问this的值。 JavaScript没有办法解除绑定并返回this。相反，你必须看看每一个人的情况，看看是否有其他的方法可以到达this。

例如，正如我们几个人所说的，在点击处理程序中，您可以访问event.target。

jQuery animate不会将任何参数传递给其回调函数，因此如果覆盖了this，那么没有通用方法可以返回到触发元素。你必须再次回到选择器或者将值保存在一个包含闭包中（人们通常使用一个名为self的变量）。

避免此问题的唯一通用方法是不使用.bind()，因此this的值不会被替换。你可以做这样的事情：

clickMe() { 
    var self = this; 
    $(".button-open").click(function(event) { 
     // self is our ES6 object 
     // this is the item that triggered the event 
     console.log(this); 
     self.openMe(); 
    }); 

Answer 4

它已经回答了，但这里是我平时使用的模式：

如果只有一个“.element”，下面的代码将工作

var el = $('.element'); 
el.click(function(target, event){ 
    // target is the original this 
    // this is the scope object 
}.bind(this, el[0])); 

但如果“.element”指的是多个元素，然后下面的代码将处理该

var clickHandler = function(target, event){ 
    // target is the original this 
    // this is the scope object 
}.bind(this); 

$('.element').click(function(e) { 
    return clickHandler(this, e); 
});