淺談react 中的 this 指向

前言 最近在作一個項目的時候 關於class方法中 this 指向以及 外置prototype 的 this 指向 引起了個人思考！

ES6原生class

咱們假設 A 爲 react B 爲 咱們建立的類 class B extends React.component{}

class A {
    constructor() {
      this.x = 1;
    }
  }
  class B extends A {
    constructor() {
      super();
      this.x = 2;
      console.log('=====');
      console.log(this);    // B
      console.log(this.x);  // 2
      console.log(super.x); // undefined
      this.getme = this.getme.bind(this)
    }
    getName(){
      console.log('getName');
      console.log(this.x); // B
      let m = this.getme
      m()
    }
    getme(){
      console.log('getme');
      console.log(this.x); // B
    }
  }
  // 類轉化爲 es5的寫法以下：
  function Es5B() {
    this.x = 2
  }
  Es5B.prototype.getName = function () {
    console.log(this);
    console.log('getName');
    console.log(this.x);
  }

  let b = new B();
  b.getName()

  let esb = new Es5B()
  esb.getName()
複製代碼

打印結果

• 通過打印咱們發現 B 中的 this 指向的都是 B 這個類
• 那麼問題來了，咱們 都知道 react的 class 中須要綁定 this, 爲何須要？綁定 this 有哪些方式,以及這些方式有什麼不一樣？ note.youdao.com/noteshare?i…

---

react 高階 api => createElement

react.docschina.org/docs/react-…

jsx 語法

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

ReactDOM.render(
  <Hello toWhat="World" />, document.getElementById('root') ); 複製代碼

編譯成下面這段代碼

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);
複製代碼

看咱們最初的那一段代碼

// 若是咱們將 constructor 中的那個 bind 去掉以後
 // this.getme = this.getme.bind(this)
 // 執行到這裏 this的指向就變化了
 let m = this.getme
 m() // 此時 this 變化爲 undefined
複製代碼

將方法進行賦值以後，丟失了上下文，致使 this 變成 undefined ， this之因此沒有變爲window 是由於類聲明和類表達式的主體以 嚴格模式 執行，主要包括構造函數、靜態方法和原型方法。Getter 和 setter 函數也在嚴格模式下執行。

ES6class 注意點

譯文 爲何須要在 React 類組件中爲事件處理程序綁定 this

未解之謎 原生 class 中 若是方法改成箭頭函數這種形式就會報錯 可是在 react 的 class 中 是能夠正常渲染的

class A {
    constructor() {
      this.x = 1;
    }
  }
  class B extends A {
    constructor() {
      super();
      this.x = 2;
    }
    getme=()=>{         // 這裏會報錯誤
      console.log('getme');
      console.log(this.x); 
    }
    getName(){
      console.log('getName');
      console.log(this.x); 
      let m = this.getme
      m()
    }
  }
  
  let b = new B();
  b.getName()

複製代碼

內置箭頭函數與外置箭頭函數是有區別的

class B extends A {
  constructor() {
    super();
    this.x = 2
  }
  getName(){
    console.log('getName');
    console.log(this.x); // B
    let m = this.getme
    m()
  }
}

  B.prototype.getme =  ()=> {
    console.log('getme');
    console.log(this);
    /* 箭頭函數的 this 指向定義時所在對象 定義的環境在 window 此時 this 指向 window 若是是 react 建立的組件 此時 this指向和類以外的 this 是一致的 （但不是 window） 若是prototype上掛載方法的時候 強烈建議你們用es5的方式就好！ */
  }


let b = new B();
b.getName()
複製代碼

react 建立組件（須要綁定 this 和綁定 this 的方法）

export default class ExtendsCompTable extends React.Component {
  constructor (props) {
    super(props)
    this.state  = {
      name: 'react測試this指向'
    }
    this.handler = this.handler.bind(this)
  }

  handler () {
    message.info('點擊了 bindthis),經過 bind 綁定 this')
  }
  renderDom () {
    let { name } = this.state
    return <Button>{name}</Button>
  }
  handlerArrow=()=> {
    console.log(this);
    message.info('點擊了箭頭函數綁定按鈕,經過箭頭函數綁定 this')
  }
  handleInnerArrow(){
    console.log(this);
    message.info('點擊了箭頭函數綁定,經過 bind 綁定 this')
  }
  handleBind(){
    console.log(this);
    message.info('點擊了bind')
  }
  render () {
    return (
      <div> <h1>234567890</h1> <Button type='primary' onClick={this.handler}>bind（this）</Button> {/* 這種直接調用的方式不須要綁定 this 做爲對象的方法被調用 this 指向對象*/} {this.renderDom()} {/* 這種 handlerArrow=()=> {...}的形式 雖然能夠用 可是不太建議*/} <Button type='primary' onClick={this.handlerArrow}>箭頭函數綁定</Button> <Button type='primary' onClick={() => { this.handleInnerArrow() }}>點擊觸發方法</Button> <Button type='primary' onClick={this.handleBind.bind(this)}>bind</Button> <Table columns={columns} dataSource={data} /> </div> ) } } 複製代碼

箭頭函數 ()=>

• 函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象，this是繼承自父執行上下文！！中的this

  var x=11;
  var obj={
    x:22,
    say:function(){
      console.log(this.x)
    }
  }
  obj.say(); // 22
  複製代碼

  var x=11;
  var obj={
   x:22,
   say:()=>{
     console.log(this.x);
   }
  }
  obj.say();// 11
  複製代碼

  var a=11
  function test1(){
    this.a=22;
    let b=function(){
      console.log(this.a);
    };
    b();
  }
  var x=new test1(); // 11
  複製代碼

  var x=11;
  var obj={
   x:22,
   say:()=>{
     console.log(this.x);
   }
  }
  obj.say(); // 22 
  複製代碼

• 箭頭函數中的 this 對象指向是固定的

• 不能夠看成構造函數，也就是說，不能夠使用new命令，不然會拋出一個錯誤

bind

不管是 call() 也好， apply() 也好，都是立馬就調用了對應的函數，而 bind() 不會， bind() 會生成一個新的函數，bind() 函數的參數跟 call() 一致，第一個參數也是綁定 this 的值，後面接受傳遞給函數的不定參數。 bind() 生成的新函數返回後，你想何時調就何時調

var m = {    
    "x" : 1 
}; 
function foo(y) { 
    alert(this.x + y); 
} 
foo.apply(m, [5]); 
foo.call(m, 5); 
var foo1 = foo.bind(m, 5); 
foo1();
複製代碼