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));

绑定this后如何再次获取和访问<a href="#" class="button-open">Open</a>？

完整代码：

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

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

3. 另一种选择是使用事件对象的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

如果您不使用.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 3

如果你绑定了你的handler，那么你仍然可以在handler中通过event.target获取被点击的item。

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

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

const self = this;

或

const me = this;

在您声明任何事件侦听器之前且不绑定任何函数。然后在处理程序中，您既可以使用this 来引用当前元素，也可以使用self 或me 来引用父作用域。

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