关于this的理解

关于this的总结

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在一个函数中代表什么。