JS中的this指向

最新推荐文章于 2021-05-09 16:23:42 发布

清欢灬

最新推荐文章于 2021-05-09 16:23:42 发布

阅读量168

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/a754334599/article/details/113996707

版权

this指向：

与我们常见的很多语言不同，JavaScript 函数中的 this 指向并不是在函数定义的时候确定的，而是在调用的时候确定的。换句话说，函数的调用方式决定了 this 指向。

JavaScript 中，普通的函数调用方式有三种：直接调用、方法调用和 new 调用。除此之外，还有一些特殊的调用方式，比如通过 bind() 将函数绑定到对象之后再进行调用、通过 call()、apply() 进行调用等。而 es6 引入了箭头函数之后，箭头函数调用时，

其 this 指向又有所不同。下面就来分析这些情况下的 this 指向。

调用方式不同时this的指向：

1、直接调用

直接调用，就是通过 函数名(...) 这种方式调用。这时候，函数内部的 this 指向全局对象，在浏览器中全局对象是 window

例如：

  function show() {
        console.log(this);
    }
    show()//this指向window

注意：

<body>
<div id="box"></div>
</body>
<script>
    var box = document.getElementById("box");
    // 在事件绑定中，直接调用函数，this仍然指向window
    box.onclick = function() {
        function show() {
            console.log(this);
        }
        show();
    }
</script>

2、在对象的方法中指向调用者

例如：

var o = {
        a:10,
        b:{
            a:12,
            fn:function(){
                console.log(this.a);//12
            }
        }
    }
    o.b.fn();

3、在事件绑定中，指向目标对象。

例如：

var box = document.getElementById("box");
box.onclick = function(){
    console.log(this);  
}

4、定时器处理函数中，指向window

例如：

var o = {
        a:10,
        b:{
            a:12,
            fn:function(){
          
                console.log(this);
            }
        }
    }setTimeout(o.b.fn,0)