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

起因：

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

數(shù)據(jù)一變就更新，是更新所有的 DOM 嗎？當然不是，哪些變了就重新渲染哪些。那就要對數(shù)據(jù)變化前后的 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 本質(zhì)上就是指向它的調(diào)用者，this 是在函數(shù)運行時才綁定,JS 里邊普通函數(shù)都是 window 調(diào)用的，所以指向 window,開啟了嚴格模式之后是 undefined。

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

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

經(jīng)過：

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

1.構造函數(shù)

類式組件里面的構造器里面的this是指向?qū)嵗龑ο蟮?，這是 ES6 類的特性，

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

在 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 運算符，先產(chǎn)生了一個空對象 {}，然后生成一個 this 指針，將 this 指針指向這個空對象；運行構造函數(shù)時，就相當于{}.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

類實現(xiàn)和上面應該大差不差，所以this是指向?qū)嵗龑ο蟮摹?/p>

2.render 函數(shù)

render 函數(shù)里面的 this,也是指向?qū)嵗?。為啥呢?/p>

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

3.bind 和箭頭函數(shù)

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

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

區(qū)別：

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

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）箭頭函數(shù)
箭頭函數(shù)：箭頭函數(shù)并不會創(chuàng)建自己的執(zhí)行上下文，所以箭頭函數(shù)中的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()

結果：

解決方法俺會兩，嘿嘿！

方法一：在構造函數(shù)中使用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默認指向?qū)嵗龑ο螅?
      實例對象通過原型鏈在類的原型上找著fnc函數(shù)，通過bind函數(shù)將其this指向改為實例對象，并返回一個新的函數(shù)
      再將這個新的函數(shù)給實例，并取名為fnc*/
    }
    speak(){
        console.log(this)//輸出當前實例對象
    }
    render() {
        return (
            <div>
                <button onClick={this.speak}>按鈕</button>
            </div>
        )
    }
}

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

import React, { Component } from 'react'

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

注意：性能存在差異

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

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

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

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

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

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

最新評論