從ES6中的函數表達式訪問類作用域

爲了簡化我的問題，我最初寫出了一個確實可行的問題。因此，讓我們假設我有這樣的代碼，它使用D3的ES6類中：從ES6中的函數表達式訪問類作用域

export default class MyClass{ 
    constructor(){ 
     this.radius = 1; 
    } 
    myFunc(){ 
     this.tooltip //defined elsewhere in the class don't worry about it 
      .on('mouseover', function(){ 
       d3.select(this).transition() 
        .ease('elastic') 
        .duration('250') 
        .attr('r', this.radius*1.5); 
        //keyword this has now been overridden 
      }); 
    } 
}

但我怎麼能實現上述功能，或者我應該採取不同的方法？

來源

2016-04-20 Alex H Hadik

沒有「類範圍」這樣的事情。你什麼意思？ – Bergi

回答first revision of the question

在事件處理的this是一樣的，在myFunc方法this，但這沒有關係的類。回調是arrow function，就是這樣。（你的代碼中沒有函數表達式）。

但是，我該如何實現上述功能，還是應該採取不同的方法？

您已經在實現所需的功能，不應該採取不同的方法。

來源

2016-04-20 12:49:35 Bergi

而他正在使用箭頭功能，一切都會好的，而不是匿名函數，在這種情況下，他會得到'undefined' –

@The：如果他使用了函數表達式而不是箭頭函數，'this'將引用' jQuery傳入處理程序的＃selector'元素。 – Bergi

可能我對我的例子做了一些錯誤，但你可以檢查它，當我點擊按鈕時，我會得到'undefined'。我知道jQuery裏面的事件處理器'this'引用了它被觸發的元素。 [小提琴]（https://jsfiddle.net/hxm4smc1/174/） –

現在，看着新的問題，這仍然與類沒有關係。

但是，我如何才能實現所需的功能？

你不能有this指向兩個不同的東西，所以你必須使用一個變量其中至少一個。該default var that = this approach依然很不錯：

myFunc(){ 
    var that = this; 
    this.tooltip.on('mouseover', function(e){ 
     d3.select(this).transition() 
      .ease('elastic') 
      .duration('250') 
      .attr('r', that.radius*1.5); 
    }); 
}

（您也可以使用var radius = this.radius;如果它不會直到鼠標懸停事件改變）。

或者你用event.currentTarget：

myFunc(){ 
    this.tooltip.on('mouseover', (e) => { 
     d3.select(e.currentTarget).transition() 
      .ease('elastic') 
      .duration('250') 
      .attr('r', this.radius*1.5); 
    }); 
}

或者你甚至將二者結合起來，不使用this可言，因爲它可能會造成混亂它做什麼參考。

來源

2016-04-20 13:23:54 Bergi

從ES6中的函數表達式訪問類作用域

回答

相關問題