探究函数内部的this指向问题

函数内部的this指向

这些 this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同
一般指向我们的调用者.

调用方式	this指向
普通函数调用	window
构造函数调用	实例对象 原型对象里面的方法页指向实例对象
对象方法调用	该方法所属对象
事件绑定方法	绑定事件对象
定时器函数	window
立即执行函数	window

  <button>点击</button>

  <script>
        // 函数的不同调用方式决定了this 的指向不同
        // 1. 普通函数 this 指向window
        function fn() {
            console.log('普通函数的this' + this);
        }
        window.fn();
        //普通函数的this[object Window]

        // 2. 对象的方法 this指向的是对象 o
        var o = {
            sayHi: function() {
                console.log('对象方法的this:' + this);
            }
        }
        o.sayHi();
        // 对象方法的this:[object Object]

        // 3. 构造函数 this 指向 ldh 这个实例对象 原型对象里面的this 指向的也是 ldh这个实例对象
        function Star() {};
        Star.prototype.sing = function() {
              console.log('构造函数'+this);
        }
        var ldh = new Star();
        ldh.sing();
       // 构造函数[object Object]
       
        // 4. 绑定事件函数 this 指向的是函数的调用者 btn这个按钮对象
        var btn = document.querySelector('button');
        btn.onclick = function() {
            console.log('绑定时间函数的this:' + this);
        };
        // 绑定时间函数的this:[object HTMLButtonElement]


        // 5. 定时器函数 this 指向的也是window
        window.setTimeout(function() {
            console.log('定时器的this:' + this);
        }, 1000);
        //定时器的this:[object Window]

        // 6. 立即执行函数 this还是指向window
        (function() {
            console.log('立即执行函数的this' + this);
        })();
        // 立即执行函数的this[object Window]
        
       
       
    </script>

//7.箭头函数
//1）箭头函数中的this是通过继承得到的，可以理解成其本身并没有this，是通过谁调用（其父对象来判断的，谁调用它谁就是this）
//2） 如果箭头函数的直接上层作用域拥有this，则使用之；如果没有，则沿着其作用域链继续向上查找
//3）箭头函数中使用的this指向其被定义时所在的作用域；普通函数中使用的this指向运行时所在的作用域
<script type="text/javascript">
		var age = 100;
		var obj = {
			age: 20,
			say: () => {
				console.log(this.age);
			}
		}
		obj.say();
		// 输出 100
		//箭头函数this指向的是被声明的作用域里面，而对象没有作用域的，所以箭头函数虽然在对象中被定义，但是this指向的是全局作用域
	</script>