Javascript函数内this对象

在函数内部除了有arguments这个对象，还有个this对象。在绝大多数情况下，函数的调用方式决定了this的值。this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。对于箭头函数，函数体内this对象就是定义时所在的对象，而不是调用时所在对象
1．全局环境
无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象。

<script>
    // 在浏览器中, window 对象同时也是全局对象：
    console.log(this === window); // true
    a = 37;
    console.log(window.a); // 37
    this.b = "MDN";
    console.log(window.b)  // "MDN"
    console.log(b)         // "MDN"
</script>

2．作为对象的方法
当函数作为对象里的方法被调用时，它们的 this 是调用该函数的对象。

<script>
	var num = 10
    var obj = {
        num: 100,
        f: function () {
            console.log(this.num)
        },
        fun:()=>{
        	console.log(this.num)
        }
    };
    var fn=obj.f
    obj.f(); // 100    this被绑定到obj
    obj.fun();//10      因箭头函数没有this，这里是指向定义时所在的对象 window
    fn();     //10        这里的this 指向window
</script>

3．作为构造函数
当一个函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象。
4．作为一个DOM事件处理函数
当函数被用作事件处理函数时，它的this指向触发事件的元素

<script>
    var mybtn = document.querySelector('#btn');
    mybtn.onclick = function () {
        console.log(this); //  是按钮调用了this所在的这个函数, 所以this就是按钮这个元素
    }
    mybtn.onclick = function () { fn2(); } // 相当于 window.fn2()
    function fn2() {
        console.log(this); // this => window
    }
    mybtn.onclick = function () { fn3(this); }
    function fn3(a) {
        console.log(a); // this => 按钮元素
    }
</script>