Что bind (this) на самом деле делает в ReactJS?

Что на самом деле делает эта строка?

Использование метода привязки JavaScript

bind creates a new function that will have this set to the first parameter passed to bind().

Это необходимо, потому что в библиотеке DOM и многих частях JavaScript скрытый / неявный параметр функции this изменен, чтобы указывать на различные скрытые объекты.

Хороший пример касается обработчиков событий в JavaScript, где параметр this не такой, как кажется:

HTML:

<button id = "someButton" name = "Bar">Hello</button>

JavaScript (запускается после загрузки DOM):

function Foo() {
    this.name = "Foo";
}
Foo.prototype.eventHandler( event ) {
    console.info( event.type ); // will always print "click"
    console.info( this.name ); // will print either "Foo" or "Bar"
}

var button = document.getElementById("someButton"); // HTMLButton

var fooInstance = new Foo(); // fooInstance.name == "Foo"

button.addEventListener( 'click', fooInstance.eventHandler );

Если вы запустите этот код, нажмите кнопку и установите точку останова в Foo.prototype.eventHandler, тогда вы увидите, что this.name - это "Bar", а не "Foo" - даже если вы передали ссылку на fooInstance.eventHandler, который наверняка знает о fooInstance при вызове?

Это не так.

Это связано с тем, что DOM API заменяет thisfooInstance.eventHandler экземпляром button. Я не знаю точной причины, но я считаю, что это связано с поддержанием обратной совместимости с обработчиками событий JavaScript на основе HTML старой школы, такими как эти:

<button onclick = "alert(this.name)" name = "Baz">Click me</button>

(Где this относится к содержащему HTMLElement)

Таким образом, используя .bindотменяет, библиотека заменяет this. Вы можете подумать, что, поскольку .bind(this) возвращает другой Function, параметр this все равно будет изменен, но на самом деле это не так. Это связано с тем, что возвращенный Function фактически не может вообще изменить свой член this, в отличие от большинства объектов Function.

В ReactJS:

Использование foo = foo.bind(this) не является чем-то уникальным для ReactJS (это часть JavaScript), но это идиома в ReactJS:

зачем вам связывать функцию в конструкторе

This is because React didn't want to mess with ES6 specifications (binding this to functions from its class is not in the ES6 class spec), but at the same time, wanted to give its users the convenience of ES6 class syntax. You can read more about this below.