快速學習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指向執行上下文造成程序錯誤