打算記流水賬一般細數一下 React 中的 this 指向問題，具體流程按事件三要素：起因，經過，結果。哈哈哈哈哈！

起因：

眾所周知，React 的設計是響應式的，使用者無需操縱 DOM,操縱數據，頁面就會渲染更新。

數據一變就更新，是更新所有的 DOM 嗎？當然不是，哪些變了就重新渲染哪些。那就要對數據變化前后的 DOM 進行比較。直接對比真實 DOM 嗎？這樣性能會很低，React 比較的是虛擬 DOM，虛擬 DOM 也是對象，只不過相較真實 DOM而言，少了很多屬性，更“輕”。

如何寫虛擬 DOM 呢？原生JS我們可以使用 document.createElement() 方法，創(chuàng)建節(jié)點。React 中也可以通過 React.createElement(component, props, children)，但是呢這種寫法遇見多層嵌套，就能讓人眼花繚亂。于是 JSX “橫空出世”，JSX 其實就是,React.createElement 的語法糖，但是我們用起來更加方便，可以直接寫成 <p id="test">hello</p> 這種形式。

但是呢問題又又來了！JSX 語法是不被 webpack 識別的，webpack 默認只能處理 .js 后綴名的文件，所以需要借助 Babel 這個 JavaScript 編譯器，而 babel 開啟了嚴格模式 **

import React, { Component } from 'react'

export default class index extends Component {
    // speak(){
    //     console.log(this)//輸出undefined
    // }
    speak = () => console.log(this)//輸出該組件
    render() {
        return (
            <div>
                <button onClick={this.speak}>按鈕</button>
            </div>
        )
    }
}

this 本質上就是指向它的調用者，this 是在函數運行時才綁定,JS 里邊普通函數都是 window 調用的，所以指向 window,開啟了嚴格模式之后是 undefined。

(function(){
    console.log(this)//window
})()

在 JSX 中傳遞的事件不是一個字符串（在原生 JS 的中監(jiān)聽事件，采用的是回調函數的形式，在Vue中給監(jiān)聽事件傳遞的是字符串變量），而是一個函數（如上面的:onClick={this.speak}），此時onClick即是中間變量，最終是由React調用該函數，而因為開啟了嚴格模式的緣故，this 是undefined,所以處理函數中的this指向會丟失。

經過：

事實上我們需要的是 this 指向當前實例化對象,無疑會使代碼編寫方便很多。類式組件里邊有兩地方的this恰好指向當前實例化對象。

1.構造函數

類式組件里面的構造器里面的this是指向實例對象的，這是 ES6 類的特性，

眾所周知 Javascript 里面是沒有像 C++,JAVA 里面的的類的概念，ES6 類的實現也是基于原型鏈來實現的，

在 ES6 以前實例化一個對象應該這樣：

function Animal(name, age) {
  this.name = name
  this.age = age
}
Animal.prototype.say = function () {
  console.log(this.name)
}
const Dog = new Animal('dog', 3)
Dog.say()  //會在控制臺打印出dog

其中的 new 運算符，先產生了一個空對象 {}，然后生成一個 this 指針，將 this 指針指向這個空對象；運行構造函數時，就相當于{}.name=dog,{}.age=3一樣的為這個對象動態(tài)添加屬性。最后將這個生成好的對象付給 Dog,

當我們使用 ES6 的 class 來聲明上面這個類的話，代碼如下:

class Animal {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  say() {
    console.log(this.name)
  }
}
const Dog = new Animal('dog', 3)
Dog.say()  //會在控制臺打印出dog

類實現和上面應該大差不差，所以this是指向實例對象的。

2.render 函數

render 函數里面的 this,也是指向實例的。為啥呢？

首先 render 方法是在類式組件的原型上邊的，React發(fā)現組件是使用類定義的時候，后邊就會 new 出來該類的實例，注意這個實例是 React 幫你 new 出來的，隨后實例調用 render 方法，將虛擬 DOM 轉換為真實 DOM，所以 render 中的this 就是指向實例咯，畢竟是他調用的嘛！，類似的呢，render 是一個生命周期鉤子，那其他的生命周期鉤子里面的 this也是指向實例組件的。

3.bind 和箭頭函數

解決 this 問題呢，要有兩個知識儲

（1）bind
call apply bind 都是定義在函數原型上邊的，用來改變函數 this 指向，傳入的第一個參數是 this,后面的參數就是fun1的參數

區(qū)別：

• call 和 bind 傳給調用的函數是可以傳多個 apply 則是將參數放進一個數組
• call 和 apply 返回立即執(zhí)行函數，bind 返回新的函數，bind()() 也是立即執(zhí)行
  
• 使用 bind 綁定 this 后，該函數里面的 this 不能變化了，不論是誰調用

let aa = {
    fun1: function(a,b){
        console.log(this)
        console.log(a-b);
    }
}        
let bb = {
    fun2: function(a,b){
        console.log(this)
        console.log(a+b);
    }
}

aa.fun1.call(bb,11,22);//bb-11
bb.fun2.apply(aa,[11,22]);//aa 33
aa.fun1.bind(bb,11,22)();//bb -11

（2）箭頭函數
箭頭函數：箭頭函數并不會創(chuàng)建自己的執(zhí)行上下文，所以箭頭函數中的this都是外層的this,會向外作用域中，一層層查找this，直到有 this 的定義

const A = {
    arrow:() =>{
        console.log(this)//window
    },
    func:function(){
        this.arrow()//window
        console.log(this)//A
        setTimeout(() => {
            console.log(this)//A
        });
    }
}
A.arrow()
A.func()

結果：

解決方法俺會兩，嘿嘿！

方法一：在構造函數中使用bind

import React, { Component } from 'react'

export default class index extends Component {
    constructor(){
        super()
        this.speak = this.speak.bind(this)
        /*解決類中的this問題：this.speak = this.speak.bind(this)，構造器里面的this默認指向實例對象，
      實例對象通過原型鏈在類的原型上找著fnc函數，通過bind函數將其this指向改為實例對象，并返回一個新的函數
      再將這個新的函數給實例，并取名為fnc*/
    }
    speak(){
        console.log(this)//輸出當前實例對象
    }
    render() {
        return (
            <div>
                <button onClick={this.speak}>按鈕</button>
            </div>
        )
    }
}

方法二：將箭頭函數賦值給類的屬性

import React, { Component } from 'react'

export default class index extends Component {
    speak = () =>{
        console.log(this)
    }
    render() {
        return (
            <div>
                <button onClick={this.speak}>按鈕</button>
            </div>
        )
    }
}//需要傳參的話，可以使用函數柯里化的思想

注意：性能存在差異

使用箭頭函數來解決性能會比較低，因為箭頭函數不是方法，它們是匿名函數表達式，所以將它們添加到類中的唯一方法是賦值給屬性。前面介紹ES6的類的時候可以看出來，ES 類以完全不同的方式處理方法和屬性

方法被添加到類的原型中，而不是每個實例定義一次。

類屬性語法是為相同的屬性分配給每一個實例的語法糖，實際上會在 constructor里面這樣實現：

    constructor(){
        super()
        this.speak = () => {console.log(this)}
    }

這意味著新實例被創(chuàng)建時，函數就會被重新定義,丟失了JS實例共享原型方法的優(yōu)勢。而方法一，只是在生成實例時多了一步 bind 操作，在效率與內存占用上都有極大的優(yōu)勢

以上就是詳解React中的this指向的詳細內容，更多關于React中的this指向的資料請關注腳本之家其它相關文章！

最新評論