this問題以及 webstorm 除錯介面

this指標問題

1 export class Component {

2  task: Task;

3  test() {
4    _.foreach(this.task.propreties, funtion(property) {
5         const task = this.task;
6    })
  }

}

第5行中報錯： this 是 undefined。

原因比較容易判斷： 在foreach 中 this 並不是 component

用的是lodash提供的函式

https://www.lodashjs.com/docs...

檢視官網之後，並沒有提到this的問題。

於是檢視了Javascript中的foreach 函式

可以看到， Javascript中的foreach函式，有一個可選引數， thisArg

當執行回撥函式 callbackFn 時，用作 this 的值。

所以，若我們用的是Javascript中的foreach函式, 就可以使用如下的解決方案：

1 export class Component {
2  task: Task;
3  test() {
4    this.task.propreties.foreach(property => {
5         const task = this.task;
6    }, this)
  }
}

同時，我們也可以讓 task 作為 thisAry引數 ，如第六行。這是時候 this 就表示 task。

1 export class Component {
2  task: Task;
3  test() {
4    this.task.propreties.foreach(property => {
5         const task = this;
6    }, task)
  }
}

值得注意的是，

如果 thisArg 引數有值，則每次 callbackFn 函式被呼叫時，this 都會指向 thisArg 引數。如果省略了 thisArg 引數，或者其值為 null 或 undefined，this 則指向全域性物件。

所以實際上，在Javascript中，不加這個this, 指的也是全域性物件。

回到前面，由於lodash 提供的 _.foreach()函式， 並沒有如同 javascipt 中的 thisArg引數

所以，我們可以自己定義一個this。

const that = this;

之後用到 this 的地方，用 this 替換就可以。

1 export class Component {
2  task: Task;
3  test() {
4     const that = this;
5    _.foreach(that.task.propreties, funtion(property) {
6         const task = that.task;
7    })
  }
}