Почему this указывает на класс, в котором был создан?

Question

[heIIfire]

В JS мы имеет четкое определение, что "this" в стрелковых функциях указывает на контескт, в котором был вызван. А тут почему так не работает?

class Parent extends React.Component {

        render(){ 
            return <Child checkThis={this.checkThis} />
       }
       checkThis = () => {
            console.log(this);
      }
}


class Child extends React.Component {
          render(){
             this.props.checkThis(); // выводит класс Parent
             return '';
         }
}

Comments

[hack504]

ты же его передал по ссылке

[hack504]

сделай так

checkThis = (obj) => {
            console.log(obj);
      }

this.props.checkThis(this);

[heIIfire]

hack504, а какая разница, если в стрелковых функциях указывает на контескт выполнения

[hack504]

heIIfire, здесь ты присвоил переменной checkThis ссылку на объект Parent
<Child checkThis={this.checkThis} />
А здесь выполняешь метод объекта Parent, т.е. он выполняется в контексте объекта Parent
this.props.checkThis();

Answer 1

[Владимир Проскурин]

Вы путаете, стрелочные функции берут контекст из того места, где были созданы.

Comments

[heIIfire]

Тогда как это работает?

a = 5;
const obj1 = {
	foo: () => {
		console.log(this.a)
    }
}
obj.foo()// ==> 5

[heIIfire]

Владимир Проскурин, но в контесте obj1 нету переменной "a",,,если я уберу "window.a", то результат будет "undefined"

[Lynn «Кофеман»]

heIIfire, вы это в браузере проверили?
Стрелочная функция у вас создана не в контексте `obj`, а в контексте window.

[Антон Спирин]

heIIfire, у вас в примере функция создается в контексте Window. Чтобы понять разницу создания объекта через литерал объекта и экземпляр класса, надо понимать как в JavaScript работает создание объектов через ключевое слово new.

[Владимир Проскурин]

heIIfire, я не невнимательно посмотрев ваш код, написал глупость, и удалил ее. В данном случае да, this это ссылка на объект window.

Answer 2

[Lynn «Кофеман»]

Ну учитывая, что этот синтаксис вообще ещё не везде есть и у вас наверняка бабель, то это на самом деле выглядит так:

class Parent extends React.Component {
    constructor() {
        this.checkThis = () => {
            console.log(this);
        }
    }

    render() { 
        return <Child checkThis={this.checkThis} />
    }
}

class Child extends React.Component {
    render(){
        this.props.checkThis(); // выводит класс Parent
        return '';
    }
}

И да, вы всё перепутали, и контекст стелочной функции как раз таки лексический. Так что логично, что внутри конструктора класса её `this` указывается на экземпляр этого класса.