js類的使用

brush示例

以d3的一個brush進行敘述，示例見：

https://bl.ocks.org/xunhanliu/6f0b46789842e9e19e6cfe9bd0b16806

應用情形：

當頁面上有多個圖時，況且每個圖維護一份brush,互不影響。

js 類的基本結構：

//定義類
var a=100;
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
 }

  toString() {

    return '(' + a + this.x + ', ' + this.y + ')';  //全局變量a,仍正常使用
  }
}

 參考自：https://www.cnblogs.com/zczhangcui/p/6528039.html

說明：

1、constructor：是構造方法

2、類中每個方法前面不許加function。

3、全局變量可正常使用

重點：

this沖突

this在事件中（element）有特定的指定的（誰的函數觸發的這個函數，這個函數內部的this就指向誰（dom））。而且在全局區域中使用this,this指向window類。

當然在自定義的類中常只存在事件綁定的方法（如click事件綁定了此類的一個方法）中this的沖突。針對這種情況，可使用閉包來避免。

如：

       class Point {
        constructor(dom) {
            d3.select(dom).on('click', this._click(this));
        }

        _click(that) {
            return function () {
                //在里面 this指向被點擊的元素，that指向Point實例  
            }
        }
    }