JS中的this指向

淡淡的烟草味﹌ 2022-11-01 01:51 261阅读 0赞

## 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)