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