快速学习this指向

前言

最近接触react和react native里面涉及到this指向的问题，如果没弄清楚，很容易出错，而之前用vue框架，this指向带来的问题并不多，所以遗忘不少，现特定整理总结一下，复习和备份一下，同时和大家分享。

正文

浏览器环境下（）

1. 普通函数；this指向调用函数的最近一个上下文，通俗点理解就是调用函数所在的对象；

   //在全局作用域下
   function fn(){
   	console.log(this)   //此时this指向未明
   }
   fn()       //指向调用上下文（此处为window）   可以看作 window.fn()
   
   let obj = {
   	fn(){ console.log(this)}
   }
   obj.fn()      //指向obj，因为其上下文是obj
   obj.fn_1 = fn
   obj.fn_1()   //指向obj
   
   fn_1 = obj.fn
   fn_1()      //指向window ，其上下文是window
   

2. 构造函数；正常情况下this指向创建的实例，如例一

   //例一：
   function F(){
   	this.a = 3;
   }
   let obj = new F();
   obj.b = 4
   console.log(obj)        //{a: 3, b: 4}
   

   同时，构造函数是可以手动指定一个返回值，该返回如果是对象则不做任何操作，如果不是一个对象，则会先试着转换为一个对象再返回，此刻实例的对象则为手动设置的返回对象，没有设置手动设置返回的构造函数可以看作

   function F(){
   	this.a = 2
   	return this 
   }
   

3. 箭头函数；this指向函数声明时的上下文

   let fn_arrow = () => {  
   	console.log(this) 	     //此时this已经绑定window了
   };     
   fn_arrow()    // window
   let obj = {
   	fn : fn_arrow
   }
   obj.fn()      //还是window，而不是指向调用函数的obj
   
   //再看个例子
   let obj = { 
   	fn_a(){
   		console.log('fn_a',this)					   
   		let fn= () => { console.log('arrow',this)}     
   		return fn
   	},
   	fn_n(){
   		console.log('fn_n',this)						
   		function fn(){
   			console.log('normal',this)
           }
   		return fn
   	}
   }
   
   let fn_arrow = obj.fn_a();			// this => obj
   let fn_normal = obj.fn_n();		    // this => obj
   fn_arrow();						    // this => obj     
   fn_normal();						//this => window
   
   思考：
   let fn = obj.fn_a;
   fn()()      // 打印出来的是那两个对象
   

4. apply、call、bind函数改变this指向

   1. apply和call
      将函数this绑定到第一个参数上，如果第一个参数不是对象，则会先将第一个参数转换为对象再绑定

      function F(a,b){ 
      	console.log(this)
      	this.a = a;
      	this.b = b
      	return this.a + this.b + this.c
      }
      let obj = {
      	a: 1,
      	b: 2,
      	c: 10
      }
      F.call(obj,2,4)    //16
      

   2. bind
      永久的将this绑定到第一个参数上

      	function F(){ console.log(this) };
      	let obj = {a: 1}
      	let fn = F.bind(obj)
      	fn()        //{a: 1}
      

   3. apply、call 和bind 的区别
      apply和call是在函数执行是判定的
      bind则是生成一个绑定this到第一个参数的对象上的函数

另

在react中如果是组件内自定义函数，需要在构造函数中使用bind绑定this指向组件this
或者在定义时使用箭头函数，以防止this指向执行上下文造成程序错误