js中this的指向问题

最新推荐文章于 2022-05-13 14:58:34 发布

Mr_TJ

最新推荐文章于 2022-05-13 14:58:34 发布

阅读量214

点赞数 12

文章标签： javascript

本文链接：https://blog.csdn.net/Mr_ZCheng/article/details/120690677

版权

this是js中的一个关键字，函数运行时自动生成的一个内部对象，只能在函数内部使用。我们要讨论的是 this 的指向。

总结就是一句话：谁调用就指向谁

1.普通函数调用，此时 this 指向 window

    function fn() {
       console.log(this);   // window
     }
     fn();  //  window.fn（),此处默认省略window

2.构造函数调用，此时 this 指向实例对象

    function Person(uname, age) {
      this.uname = uname
      this.age = age;
      console.log(this) // 此处 this 分别指向 Person 的实例对象 ldh zxy
    }
    var ldh = new Person('刘德华', 18)
    var zxy = new Person('张学友', 20)

3.对象方法调用，此时 this 指向该方法所属的对象

 var obj = {
       fn: function () {
         console.log(this); // obj
       }
     }
    obj.fn();

4.通过事件绑定的方法，此时 this 指向绑定事件的对象

<body>
  <button id="btn">按钮</button>
  <script>
    var btn = document.querySelector("button");
    btn.onclick = function () {
      console.log(this); // btn
    }
  </script>
</body>

#####注意：事件冒泡中会指向触发元素

<!-- 在线jquery -->
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    $('ul').on('click', 'li', function () {   //这里绑定事件的元素是ul
      console.log(this);   //当前点击的li
    })
  </script>
</body>

5.定时器函数，此时 this 指向 window

    setTimeout(function () {
      console.log(this); //window
    }, 1000);

    setInterval(function () {
      console.log(this) //window
    }, 1000);

Mr_TJ

关注

12
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
js中this的指向问题

this是js中的一个关键字，函数运行时自动生成的一个内部对象，只能在函数内部使用。我们要讨论的是 this 的指向。总结就是一句话：谁调用就指向谁1.普通函数调用，此时 this 指向 window function fn() { console.log(this); // window } fn(); // window.fn（),此处默认省略window2.构造函数调用，此时 this 指向实例对象 fun.
复制链接

扫一扫