JavaScript `this`は異なるクラスメソッドで動作します

Question

異なるクラスメソッドでクラスフィールドを使用しようとすると、" warp "d3ドラッグコードがクラス内にあり、thisに問題があります。

ここでコード：

'use strict'; 

class D3DragHandler { 

    constructor(link, datas) { 
     this.drag = null; 
     this.links = link; 
     this.datas = datas; 
     this.zadragged = null; 
     //  console.log(this.link); 
    } 

    saveNodePosition() { 

     var postData = {}; 
     var adragged = this.zadragged; //ERROR HERE 

     postData.id = datas[adragged].id; 
     postData.x = datas[adragged].dx + datas[adragged].x; 
     postData.y = datas[adragged].dy + datas[adragged].y; 

     d3.xhr('/index.php?option=com_myrod&task=ajax.save&format=json&raw=true&token=' + token + "&data=" + JSON.stringify({ 
       "data": postData 
      })) 
     .header("Content-Type", "application/json") 
     .post("", 
      function (err, rawData) { 
      var data = JSON.parse(rawData); 
      console.log("got response", data); 
     }); 

    } 

    setDragged(value) { 
     console.log(value); 
     this.zadragged = value; //ERROR HERE 
     //var v = this.zadragged; 
    } 

    init() { 
     var link = this.links; 
     var datas = this.datas; 
     var saveFunc = this.saveNodePosition; 

     var draggedKeyFunc = this.setDragged; 

     // Define drag beavior 
     this.drag = d3.behavior.drag() 
      .on("drag", function (d) { 
       var x = d3.event.x; 
       var y = d3.event.y; 

       d3.select(this).attr("transform", "translate(" + x + "," + y + ")"); 

       //adragged = d.key; 
       draggedKeyFunc(d.key); 

       datas[d.key].dx = d3.event.x; 
       datas[d.key].dy = d3.event.y; 
       link.update(); 

      }) 
      .origin(function() { 
       var t = d3.transform(d3.select(this).attr("transform")); 

       svg.select("text.position").text(function (d) { 
        return Math.round(d.value.x) + ":" + Math.round(d.value.y); 
       }) 

       return { 
        x: t.translate[0], 
        y: t.translate[1] 
       }; 

      }) 
      .on("dragend", function() { 
       var d = d3.event.sourceEvent; 

       console.log(d); 

       saveFunc(d); 
      }); 
     return this.drag; 
    } 

} 

私はエラーを取得する場所コード内のコメントを表示するようにする、と私は他の方法でthisを使用して、それがうまく機能するためには、非常に奇妙です。しかし、この文字列では、私はエラーを取得する：

TypeError: this is undefined

私はすべてのコードが同じように動作しなければならないことを非常に奇妙な期待されていますが、多分私はここで何かを見逃したのか？

setDragged(value)メソッドはクラスメソッドなので、thisはクラスそのものです。

Answer 1

あなたの問題はそうthisが、彼らは方法として呼ばれたどんなオブジェクトを参照し、そのクラスのメソッドは、任意の特定のオブジェクトにバインドされていないので、ときに、この：関連オブジェクト

var draggedKeyFunc = this.setDragged; 

// ... 

draggedKeyFunc(d.key); 

がなくなって、 thisはstrictモードではundefined、strictモード以外ではグローバルオブジェクトです。

var dragHandler = this; 

// ... 

dragHandler.draggedKeyFunc(d.key); 

または結合関数を作成：

var draggedKeyFunc = this.setDragged.bind(this); 

// ... 

draggedKeyFunc(d.key); 

Answer 2

あなたのビルドプロセスにバベルのプラグインが含まれている場合は、以下のようなクラスのプロパティを使用することができます

オプションは、メソッドなどのオブジェクトを呼び出すことが含ま

setDragged = (value) => { 
    console.log(value); 
    this.zadragged = value; //ERROR HERE 
}