认识javascript中的this

在javascript中this是一个神奇的东西，它在不同的使用情况下会有不同表现，相信对this没有详细了解的同学用着用着就开始放迷糊了。

今天我们讨论在不同执行环境中this的作用。

1. 在方法中，this 表示该方法所属的对象。

function A() {
    console.log(this);
}

A(); //Window

let obj = {};
obj.A = A;
obj.A(); //obj

同样是执行A方法，第一次执行时候打印了Window，是因为A在window的环境下运行，所以打印了Window。

第二次，我们将A方法挂载到了对象obj上，然后执行obj的A方法，此时A方法在obj的环境下运行，所以打印了obj。

 

由此，我们可以总结一个结论：方法中的this指向方法所属的对象。

 

2.  在单独使用中，this表示全局对象Window。

console.log(this); //Window

 

3. 在函数中，this 表示全局对象。

function A() {
    console.log(this);
}

A(); //Window

4. 在函数中，在严格模式下，this 是未定义的(undefined)。

console.log(this); //undefined

5. 在事件中，this表示接受监听事件的元素。

document.addEventListener("click", function() {
    console.log(this); //document
})

6. 在箭头函数中，this表示箭头函数外层函数（最近一层函数）的this。通俗来说，箭头函数不改变this指向。

document.addEventListener("click", function() {
    console.log(this); //document
    let o = {};
    o.A = () => {
        console.log(this);
    }

    o.A(); //document
});

这里我们需要注意，o.A()打印的是document，是因为我们A是箭头函数，箭头函数的this表示它外层执行环境中的this，也就是 事件监听中的this。

7. call、apply、bind这三个方法可以改变函数的this指向。

function A() {
    console.log(this);
}

let obj = {};

A.call(obj); // obj
A.bind(obj)(); // obj
A.apply(obj); //obj

 

以上就是this的各种规则，清楚的了解他们之后，相信以后开发中就不会因为this而犯迷糊了。

 

浅陋见识，不足之处，请大神指正。