乐趣区

关于前端:this问题-以及-webstorm-调试界面

jiezi

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

webstrom 或 idea 调试界面按钮

一、首先说第一组按钮，共 8 个按钮，从左到右顺次如下：

  1. Show Execution Point (Alt + F10)：如果你的光标在其它行或其它页面，点击这个按钮可跳转到以后代码执行的行。
  2. Step Over (F8)：步过，一行一行地往下走，如果这一行上有办法不会进入办法。
  3. Step Into (F7)：步入，如果以后行有办法，能够进入办法外部，个别用于进入自定义办法内，不会进入官网类库的办法。
  4. Force Step Into (Alt + Shift + F7)：强制步入，能进入任何办法，查看底层源码的时候能够用这个进入官网类库的办法。
  5. Step Out (Shift + F8)：步出，从步入的办法内退出到办法调用处，此时办法已执行结束，只是还没有实现赋值。
  6. Drop Frame (默认无)：回退断点，。
  7. Run to Cursor (Alt + F9)：运行到光标处，你能够将光标定位到你须要查看的那一行，而后应用这个性能，代码会运行至光标行，而不须要打断点。
  8. Evaluate Expression (Alt + F8)：计算表达式。

二、第二组按钮，共 7 个按钮，从上到下顺次如下：

  1. Rerun ‘xxxx’：从新运行程序，会敞开服务后重新启动程序。
  2. Update ‘tech’ application (Ctrl + F5)：更新程序，个别在你的代码有改变后可执行这个性能。而这个性能对应的操作则是在服务配置里，如图 2.3。
  3. Resume Program (F9)：恢复程序，比方，你在第 20 行和 25 行有两个断点，以后运行至第 20 行，按 F9，则运行到下一个断点(即第 25 行)，再按 F9，则运行残缺个流程，因为前面曾经没有断点了。
  4. Pause Program：暂停程序，启用 Debug。目前没发现具体用法。
  5. Stop ‘xxx’ (Ctrl + F2)：间断按两下，关闭程序。有时候你会发现敞开服务再启动时，报端口被占用，这是因为没齐全敞开服务的起因，你就须要查杀所有 JVM 过程了。
  6. View Breakpoints (Ctrl + Shift + F8)：查看所有断点。
  7. Mute Breakpoints：哑的断点，抉择这个后，所有断点变为灰色，断点生效，按 F9 则能够间接运行完程序。再次点击，断点变为红色，无效。如果只想使某一个断点生效，能够在断点上右键勾销 Enabled。
退出移动版