JavaScript的this指向问题

心平气荷.

于 2023-04-03 15:12:32 发布

阅读量71

点赞数

分类专栏： JavaScript的小知识点文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/qq_53306713/article/details/129930309

版权

JavaScript的小知识点专栏收录该内容

2 篇文章

订阅专栏

本文探讨了JavaScript中this关键字在不同场景下的指向问题，包括普通函数、立即执行函数、定时器、事件处理函数、对象方法以及构造函数和原型中的用法。通过示例代码展示了在这些情况下this如何代表不同的上下文对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btn">测试</button>
</body>
<script>
  /* 
  this的指向问题：

  //普通函数中的this，指向window
  function fn() {
    consolr.log(this)
  }
  window.fn(); 
  //2.立即执行函数中的this,this指向的是window
  (function () {
    console.log(this)
  })();//window

  //3-定时器中的this,window
  var timer = window.setInterval(function () {
    console.log(this)
  }, 5000)

  //4-事件处理函数中的this,this代表绑定事件的对象
  var btn = document.getElementById("btn");
  btn.onclick = function () {
    console.log(this);
  }

  //5-对象方法中的this,this指向的是当前的对象
  var obj = {
    x: 1000,
    fn: function () {
      console.log(this)
    }
  };
  obj.fn()*/

  //6-构造函数中的this，原型中的this都指向的是实例化对象
  function Person(name) {
    this.name = name
    this.fn1 = function () {
      console.log(this)
    };
  }
  Person.prototype.fn2 = function () {
    console.log(this);
  }
  var p1 = new Person("lingling");//p1称之为实例化对象
  console.log(p1);
 // p1.fn1();
 // p1.fn2();

</script>

</html>