[JavaScript知识库] JavaScript - 函数A作为参数时，函数A中this的指向问题

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript - 函数A作为参数时，函数A中this的指向问题 -> 正文阅读

[JavaScript知识库]JavaScript - 函数A作为参数时，函数A中this的指向问题

JavaScript - 函数A作为参数时，函数A中this的指向问题

本问题将引出ES6众多新特性中箭头函数的优点（情况C）
在线测试：https://www.w3school.com.cn/tiy/t.asp?f=js_function_apply
- 可直接复制文中代码在网页中完成测试

一：情况A（`this指向winodw对象`）

在这里插入图片描述

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript函数A作为参数时，函数A中this的指向问题</h1>

<script>
function Person() {
  console.log(this);
  this.age = 0;
 
  setInterval(function growUp() {
    // 在非严格模式下，growUp() 函数的 this 指向 window 对象
    console.log(this);
    this.age++;
  }, 1000);
}
var person = new Person();
</script>

</body>
</html>

二：情况B（`this指向当前对象`）

在这里插入图片描述

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript函数A作为参数时，函数A中this的指向问题</h1>

<script>
function Person() {
  console.log(this);
  let self = this;
  self.age = 0;
 
  setInterval(function growUp() {
    console.log(self);
    self.age++;
  }, 1000);
}
var person = new Person();
</script>

</body>
</html>

三：情况C（`this指向当前对象，使用ES6箭头函数简写`）

在这里插入图片描述

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript函数A作为参数时，函数A中this的指向问题</h1>

<script>
function Person() {
  console.log(this);
  this.age = 0;
 
  setInterval(()=>{
    console.log(this);
    this.age++;
  }, 1000);
}
var person = new Person();
</script>

</body>
</html>