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

起因：

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

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

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

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

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ù)運(yùn)行時(shí)才綁定,JS 里邊普通函數(shù)都是 window 調(diào)用的，所以指向 window,開啟了嚴(yán)格模式之后是 undefined。

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

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

經(jīng)過：

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

1.構(gòu)造函數(shù)

類式組件里面的構(gòu)造器里面的this是指向?qū)嵗龑?duì)象的，這是 ES6 類的特性，

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

在 ES6 以前實(shí)例化一個(gè)對(duì)象應(yīng)該這樣：

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()  //會(huì)在控制臺(tái)打印出dog

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

當(dāng)我們使用 ES6 的 class 來聲明上面這個(gè)類的話，代碼如下:

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

類實(shí)現(xiàn)和上面應(yīng)該大差不差，所以this是指向?qū)嵗龑?duì)象的。

2.render 函數(shù)

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

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

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

解決 this 問題呢，要有兩個(gè)知識(shí)儲(chǔ)

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

區(qū)別：

• call 和 bind 傳給調(diào)用的函數(shù)是可以傳多個(gè) apply 則是將參數(shù)放進(jìn)一個(gè)數(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ù)并不會(huì)創(chuàng)建自己的執(zhí)行上下文，所以箭頭函數(shù)中的this都是外層的this,會(huì)向外作用域中，一層層查找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()

結(jié)果：

解決方法俺會(huì)兩，嘿嘿！

方法一：在構(gòu)造函數(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)，構(gòu)造器里面的this默認(rèn)指向?qū)嵗龑?duì)象，
      實(shí)例對(duì)象通過原型鏈在類的原型上找著fnc函數(shù)，通過bind函數(shù)將其this指向改為實(shí)例對(duì)象，并返回一個(gè)新的函數(shù)
      再將這個(gè)新的函數(shù)給實(shí)例，并取名為fnc*/
    }
    speak(){
        console.log(this)//輸出當(dāng)前實(shí)例對(duì)象
    }
    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ù)來解決性能會(huì)比較低，因?yàn)榧^函數(shù)不是方法，它們是匿名函數(shù)表達(dá)式，所以將它們添加到類中的唯一方法是賦值給屬性。前面介紹ES6的類的時(shí)候可以看出來，ES 類以完全不同的方式處理方法和屬性

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

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

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

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

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

最新評(píng)論