ES6的class本质和react中需要使用bind(this)的原因

ES6的class

我们知道ES6新出一个规范是使用class关键字来定义一个类，这在以前是没有的

在以前，需要在javascript里实现面向对象，就需要使用prototype

什么是面向对象？

面向对象有如下几个基本特征，通常认为，只要实现了这几个特性，就认为是实现了面向对象：

1.封装

2.继承

3.多态

这里不对三个基本特征的做详细展开。只需要知道，javascript实现继承和多态都需要用到prototype

而ES6的class，本质上还是ES5的prototype的语法糖

class foo{
    constructor(){
    }
    a(){}
    b(){}
}

// 等价于
function foo(){};
foo.prototype = {
    constructor(){},
    a(){},
    b(){},
}

ES6的class跟ES5的定义方式用几个不同

1.没有变量提升

2.this指向不同

先来看1：

test(); // 输出'test'
function test(){
    console.log('test');
}

我们知道即便在定义test函数之前执行test()，也是会得到结果的。这是因为解析javascript代码的时候会把所有的function test(){}这类代码（即正常定义函数）都提升到最上方去定义。

但是这么执行不行：

let a = new test(); // 报错
class test(){}

再看2：

class Animal {
    printName () {
      this.print('Hello animal');
    }
    print(name) {
      console.log(name);
    }
}
const animal = new Animal();
animal.printName(); // 输出'Hello animal'
const { printName } = animal;
printName(); // 报错: Cannot read property 'print' of undefined

如果执行了bind

class Animal {
    constructor(){
        this.printName = this.printName.bind(this);
    }
    printName () {
      this.print('Hello animal');
    }
    print(name) {
      console.log(name);
    }
}
const animal = new Animal();
animal.printName(); // 输出'Hello animal'
const { printName } = animal;
printName(); // 输出'Hello animal'

发生了什么？

animal中的printName函数的this原本指向的是执行环境，如果不执行bind，那么printName函数的this指向window。

在执行new Animal()的时候，如果执行了bind，那么从animal中获取的printName函数，其this对象已经被绑定到了constructor的this,即animal上。

以下是this的指向

那么我们为什么需要在react里bind(this)呢？

简单来说，就是react在调用render方法的时候，会先把render里的方法赋值给一个变量（比如变量foo），然后再执行foo()。

具体来说，以典型的绑定点击事件为例

<div onClick={this.clickHandler}></div>

react构建虚拟DOM的时候，会把this.clickHandler先赋值给一个变量。我们假设是变量clickFunc = this.clickHandler;

然后，把虚拟DOM渲染成真实DOM的时候，会把onClick属性值替换成onclick，并给onclick赋值clickFunc

在复杂的情况中，可能存在多次传递，如果不进行bind，那么this的指向是一定会丢失的。

为什么react不自己集成bind到生命周期里？

1是，没有特别合适集成bind的地方

2是，并不是所有的函数都需要bind

3是，随意集成bind可能导致效率低下