深入理解JavaScript中的this指向_说一说javascript中的is指向-优快云博客

本文链接：https://blog.youkuaiyun.com/fuyangsuccessful/article/details/128564432

接触前端已经好几年了，实际做开发也就才半年而已，由于技术比较菜，期间一直没有从事前端开发工作，但是本菜鸟从未放弃，有时间就会不断的复习。前面学的不扎实，一直没搞明白js中this的指向，只知道，谁调用就指向谁，太过片面，这次查阅了大量资料，将以文章的形式记录学习笔记供自己后续复习，如有不足之处，希望大佬在评论区批评指正。

this关键字

this关键字在ES6没有出之前，是一个很纯粹的关键字，就是谁对它好，它就跟谁（谁调用我，this就指向谁）注意：ES6的箭头函数是不算的。

为了更加明确理解this关键字，将分为以下几个场景进行验证

1、全局中进行验证

<script>
        console.log(this); 

</script>

控制台输出this的指向为Window

2、在函数中的运用

<script>
       function test(){
          console.log(this);
       }

      //调用函数

       test();
</script>

上述代码为在函数中的运用，创建的函数为在全局下创建的，当调用函数test的时候，控制台打印的依然为Window对象，由此证明确实符合前面说过的口诀，谁调用我，我就指向谁。其实我们在开发中，定义的全局的函数、全局的函数都是挂载到Window下的，相当于 window.test(),只不过在编写过程中window可以省略。

<script>
       function test(){
          console.log(this);
       }
       window.test();
</script>

3、在对象中使用

<script>
       var obj ={
        name:"Yves",
        test:function(){
            console.log("我是对象内部的函数",this);
        }
       }
       obj.test()
</script>

上述代码中，一个对象中，分别有属性和方法，都是键值对的形式，第一个属性为的key为name,value是一个字符串；第二个键值对key是test，value是一个函数，在控制台输出的结果为obj这个对象，也就是说在对象中的this指向的就是obj，因为obj对象调用的里面的函数。

4、在定时器中的运用（setTimeout）

<script>
       setTimeout(function(){
           console.log("我也是被window调用的",this);
       },2000)
</script>

上述代码块，是定时器函数在2秒中之后，内部的这个函数实际上是一个回调函数，在规定的时间之后，由window窗口的调度机制进行调用的，所以这里面的this指向的还是window。

5、事件绑定的this

<body>
    <button></button>
    <script>
    //   获取到按钮
    var btn = document.querySelector("button");
    // 为btn添加点击事件
    btn.onclick = function(){
        console.log("绑定事件函数的this"+this);
    }
    </script>
</body>