JS中的this

this的概念

• 语法：this
• 值：当前执行代码的环境对象，在非严格模式下，总是指向一个对象，在严格模式下可以是任意值。
• w情况说明：只有在函数被调用了才能决定this的值，this 不能在执行期间被赋值，并且在每次函数被调用时的this的值也可能不同

非严格模式下

this指向window

	当this出现在普通函数中，this表示window,
	
	当通过window对象调用一个函数，this也指向window
	
	在IIFE(立即调用函数表达式），this也指向window

<div id="box">这是一个盒子</div>
<script>
let box = document.getElementById("box")；
function  f(){
		console.log(this);//this在函数被调用了才能知道指向谁
}
f();//普通的函数调用      this指向window
box.onclick = f();// 还是普通的函数调用      this指向window
</script>

<script>
 function k(){
        console.log(this);
    }
    window.k();//window对象调用 调用后打印window对象
    k();//普通调用 调用后打印window对象
</script>

<script>
(function () {
    console.log(this);
})(); // 在非严格模式下，IIFE中的this表示window
</script>

this指向事件源

        事件绑定，事件处理程序，事件发生时，浏览器会帮我们调用这个函数，此函数中的this 指向事件源

通过小例子更清晰些

<div id="box">这是一个盒子</div>
<script>
let box = document.getElementById("box");
function f(){
    console.log(this);  // window
    return function g(){
        console.log(this); // 事件源
    }
}
box.onclick = f();//this指向事件源
</script>

this指向对象

        在一个对象中，如果有方法（函数）,通过这个对象调用方法，方法中的this 表示这个对象

<script>
function f() {
    console.log(this);
}
// f(); // 普通函数调用  里面的this表示window
let obj = {};
obj.g = f;//将函数f赋值给对象obj的属性g
obj.g();//this指向obj
</script>

严格模式下

	调用一个普通函数，this 表示undefined

	IIFE中的this也表示undefined

<script>
	"use strict"//启用js的严格模式
	function f(){
		console.log(this);
	}
	f();
	(function(){
		console.log(this);
	 })();
</script>

能改变this指向的方法

call方法

在这里只考虑call方法改变this指向的事儿

	<script>
		function F(a,b){
			console.log("F...");
			console.log(this);
		}
		var obj ={};
		F.call(obj);//call让F执行，F函数中的this指向obj
		F.call(obj,1,2)//1，2是作为F的实参
	</script>

apply方法

   <script>
   	function F(a,b){
   		console.log("F...");
   		console.log(this);
   	}
   	var obj ={};
   	F.apply(obj);//apply让F执行，F函数中的this指向obj
   	F.apply(obj,[1,2])；//1，2是作为F的实参
   </script>

感觉apply和call的用法和作用一样，就是传值的形式不一样

bind方法

<script>
   	function F(a,b){
   		console.log("F...");
   		console.log(this);
   	}
   	var obj ={};
   	F.bind(obj);//bind不会让F执行，F函数中的this指向obj
   	F.bind(obj,1,2)；//1，2是作为F的实参
   	console.log(F.bind(obj,1,2);
   </script>

##箭头函数

<script>
       function F(){
       this.age = 10;
       let say=()=>{
              console.log(this.age);//10
              this.age++;
              console.log(this.age);//11
          }
          say();
       }
       var f = new F();
       console.log(f.age);//11
  </script>

箭头函数没有自己的this,箭头函数体内的this是上一级的执行代码的环境对象