this是JS中很常见的关键字，但是this在函数的不同执行环境内，所代表的是很灵活的，因此很难知道this代表什么，只有在函数运行后，你才能知道它代表什么。所以这里对常见的this所处的环境，进行了的总结。
将this分为严格模式下的this和非严格模式下的this：
在严格模式下调用一个普通函数，this表示undefined，例：
我要评论<script>
"use strict"
// 代表在严格模式下
function f(){
console.log(this)
}
f();
// 输出undefined
</script>
对比非严格模式的相同代码的输出结果：
<script>
// 在非严格模式下
function f(){
console.log(this)
}
f();
// 输出Window
</script>
在非严格的模式下分为好几种情况：
（1）如果this是在普通函数中，this表示Window；即普通函数调用，this表示Window。例:
<script>
function f() {
console.log(this)
}
window.f();
// 输出window
f();
// 输出window
</script>
（2）在一个对象中，如果有方法，通过这个对象调用方法，方法中的this表示这个对象。例：
<script>
var A={
name:"Li ming",
age:18,
like:function(){
console.log("playing ball");
//输出 playing ball
console.log(this);
// 输出{name: "Li ming", age: 18, like: ƒ}
}
}
A.like();
</script>
（3）在IIFE（立即函数调用）中，this也表示window。例：
<script>
let obj = {
fn:(function (a) {
var a
console.log(this)
// 输出Window
})(10)
}
</script>
（4）事件绑定，事件处理程序，事件发生时，浏览器帮我们调用这个函数，此函数中的this表示事件源。例：
<button id="box">this</button>
<script>
let box=document.getElementById("box");
// 获取button的值
box.onclick=function(){
console.log(this);
// 当点击button时，就会输出<button id="box">this</button>,this表示事件源。
}
</script>
总之，想搞清楚和理解this到底代表什么，还需要多做，遇到的题多了，你会发现万变不离其宗，this来来回回还是那几样，上面只是简单的对this进行的举例说明，但就算在复杂情况下，一步一步的来执行代码，也会很容易的发现this的含义；例：
<script>
<script>
let box=document.getElementById("box");
function f(){
console.log(this);
}
box.onclik=f();
</script>
// 输出window
这道题，如果不仔细看就会以为是事件源，在点击按钮时打印事件源；但其实这里的this表示的是window，只是普通的函数调用。
<script>
var num = 10;
var obj = {
num:20
}
obj.fn = (function (num) {
this.num = num * 3;
num++;
console.log(num);
return function (n) {
this.num += n;
num++;
console.log(num);
}
}) (obj.num)
var fn=obj.fn;
fn(5);
console.log(num);
console.log(window.num)
// 输出 21 22 65 65
</script>
通过上述这两道的练习，应该会对this有点感觉，最后，不管从哪方面来了解this，都需要经过练习，才能准确而有快速的知道this在一个函数中代表什么。
本文地址：https://blog.csdn.net/only_zing/article/details/107578610
如对本文有疑问， 点击进行留言回复！！
vue源码实战render.js与$nextTick的异步调用
网友评论