this用法

一、this的作用

this表示对当前对象的引用，在js中 this 不是固定不变的，它会随着执行环境的改变而改变。

二、this的指向

1.在方法中(function函数)，this 表示该方法所属的对象。

<script type="text/javascript">
		let box=document.querySelector(".box");
		box.onclick=function(){
			console.log(this);
			//将会打印指向的box;
		}
	</script>

2.如果单独使用，this 表示全局对象。

<script type="text/javascript">
		console.log(this);
		//将会打印Window;
	</script>

在箭头函数中，this 表示全局对象

<script type="text/javascript">
		let a=()=>{
			console.log(this);
		}
		a();
	</script>

4.在setTimeout()中，this 表示全局对象

<script type="text/javascript">
		let obj={
			a:setTimeout(function(){
			console.log(this);
		},),
			b:"岑子"	,
			c:"18"
		}
		console.log(obj);
		//obj中的a会等于setTimeout的触发次数
	</script>

三.this的方法

1.call(接收的对象,参数1，参数2…)

<script type="text/javascript">
		let obj={
			a:function(x,y){
				console.log(this);
				console.log(x);
				console.log(y);
			}
			}
		let b={
			x:"橙子",
			y: 18
			};	
		obj.a.call(b,"迷迭","蔷薇");
		</script>

2.apply(接收的对象，[参数1，参数2…])

<script type="text/javascript">
        let obj={
            a:function(x,y){
                console.log(this);
                console.log(x);
                console.log(y);
            }
            }
        let b={
            x:"橙子",
            y: 18
            };    
        obj.a.apply(b,"迷迭","蔷薇");
    </script>

3.bind(接收的对象，参数1,参数2，[参数3，参数4…])()

<script type="text/javascript">
		let obj={
			a:function(x,y){
				console.log(this);
				console.log(x);
				console.log(y);
			}
			}
		let b={
			x:"橙子",
			y: 18
			};	
		obj.a.bind(b,"迷迭",["蔷薇"])();
	</script>

4.call,bind,apply的区别

1.applay、call、bind他们三个都能改变函数this的指向问题；
2.applay、call这两个方法的主动调用，bind返回的是改变this指向后的
新函数；
3.传参的问题区别，call和bind都是直接传递参数，applay传递的是数组