js this指向

一直以来我们对JS 中的this指向问题尤为头疼，那么今天梦颜带大家认识认识这个万恶的this

大家首先要明确一点

this概念：任何函数，内部都有一个变量(系统自动产生)this，每一个函数都有自己的主人。
那就是this 永远指向当前函数的主人 。

       【注】构造函数中的this指向当前新创建的对象。构造函数主人就是属于新创建的对象。

1、 普通函数的调用

 //一般情况下this指向window 
        window.username='潇梦颜'
		function fn(){
   		 alert(this.username);//潇梦颜
		}
		fn();
//调用可以理解为
//window.fn();
            

2.对象函数调用

这个相对来说就是比较好理解啦，　this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的

				window.b=我是22
				let obj={
				    a:我是1,
				    fn:function(){
				        alert(this.a);//我是1
				        alert(this.b);//undefined
				    }
				}
				obj.fn();

当然也有比较特殊的情况

如下：

//1.
			var o = {
			    a:10,
			    b:{
			        // a:12,
			        fn:function(){
			            console.log(this.a); //undefined
			        }
			    }
			}
			o.b.fn();

此案例中对象b中没有属性a，这个this指向的也是对象b，因为this只会指向它的上一级对象，不管这个对象中有没有this要的东西。

//2.
			var o = {
			    a:10,
			    b:{
			        a:12,
			        fn:function(){
			            console.log(this.a); //undefined
			            console.log(this); //window
			        }
			    }
			}
			var j = o.b.fn;
			j();

这里this指向的是window，是不是有些难搞？

遇它不要慌，其实this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的，例子中虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window

//3.
			let obj1={
			    a:22
			};
			let obj2={
			    a:111,
			    fn:function(){
			        alert(this.a);
			    }
			}
			obj1.fn=obj2.fn;
			obj1.fn();//22

虽然obj1.fn是从obj2.fn赋值而来，但是调用函数的是obj1，所以this指向obj1

看到这里对this是不是有点好感了呢？

this讲来讲去其实就是那么一回事， 在不同的情况和环境下this也会有不同，对于这个这个大家也不用着急， 只能慢慢地的去体会，也是需有一定的代码基础的。

3.构造函数的调用

//1.
			let userName=function(){
			    this.name='111';
			}
			
			let subName=new userName();
			subName.name='cn';
			console.log(this.name);//cn
			
			let subName1=new userName();
			console.log(this.name)//111
 
 

关于这个案例我们来回忆下（new的四个步骤）就差不多了！

在构造函数里面返回一个对象，会直接返回这个对象，而不是执行构造函数后创建的对象（但是有一个坑，虽然一般不会出现，但是有必要提一下。）

			//2.
			function Fn(){
			    this.user = "潇梦颜";
			}
			var a = new Fn();
			console.log(a.user); //潇梦颜

这里之所以对象a可以点出函数Fn里面的user是因为new关键字可以改变this的指向，将这个this指向对象a，因为用了new关键字就是创建一个对象实例，我们这里用变量a创建了一个Fn的实例（相当于复制了一份Fn到对象a里面），此时仅仅只是创建，并没有执行，而调用这个函数Fn的是对象a，那么this指向的自然是对象a。

补充说明一下，当this遇到return的时候该 怎么办呢？

			//3.
			function fn()  
			{  
			    this.user = '潇梦颜';  
			    return {};  
			    //return function(){};
			}
			var a = new fn;  
			console.log(a.user); //undefined

如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数**

			function fn()  
			{  
			    this.user = '潇梦颜';  
			    return undefined;
			//  return null;
			}
			var a = new fn;  
			console.log(a); //fn {user: "潇梦颜"}

4.apply和call调用

 			function show(x, y){

                alert(x + ", " + y);
                alert(this);
            }


            // show(10, 20); //Window

            // show.call("call", 20, 30);

            // show.apply("apply", [30, 40]);


            // show.bind("bind")(40, 50);

apply、call以及bind都是用来强制改变this指向的方法

1.call 接收的参数不固定，第一个参数是函数体内 this 的指向，第二个参数以下是依次传入的参数。

2.apply接收两个参数，第一个参数也是函数体内 this 的指向。第二个参数是一个集合对象（数组或者类数组）。

3.bind与apply、call最大的区别是它不会立即调用。

5、箭头函数调用

在ES6中给我们新提供了一种箭头函数，这提高了我们的开发效率，但是在箭头函数里面，没有 this ，箭头函数里面的 this 是继承外面的环境。所以在处理一些指向问题的时候也可以直接用箭头函数代替，既方便又好理解

举个栗子~~

		let obj={
		    a:1,
		    fn:function(){    
		        setTimeout(function(){
		        console.log(this.a)
		        });
		    }
		};
		obj.fn();//undefined




============================================================
解决方法：
		let obj={
		    a:1,
		      var _this = this;
		    fn:function(){    
		        setTimeout(function(){
		        console.log(_this.a)
		        });
		    }
		};
		obj.fn();//1
		//此时this将一直指向obj;

栗子中，虽然 fn() 里面的 this 是指向 obj ，但是，传给 setTimeout 的是普通函数， this 指向是 window ， window 下面没有 a ，所以这里输出 undefined。
改用箭头函数=>

		let obj={
		    a:1,
		    fn:function(){    
		        setTimeout(()=>{
		        console.log(this.a)
		        });
		    }
		};
		obj.fn();//1

这次可以输出 1是因为，传给 setTimeout 的是箭头函数，然后箭头函数里面没有 this ，所以要向上层作用域查找，在这个例子上， setTimeout 的上层作用域是 fn。而 fn 里面的 this 指向 obj ，所以 setTimeout 里面的箭头函数的 this ，指向 obj 。所以输出结果为 1

说到这里也该收尾了，蟹蟹大家的支持，梦颜欢迎大家多多指教，在工程师的道路上共同进步，加油！

	     小编持续更新ing~┏(＾0＾)┛下次见~~拜拜~~