*this* 对象在 React 组件中是“未定义的”

Question

I am trying to build a utility function for my React project and it will be used within a React component to manage some behaviors.

During the development process I discovered that the object this within my function (not a React component) returned undefined . I would use the keyword this because I would chain the functions (fn1().fn2().fn3()) to create a kind of declarative experience for those who want to use my function.

How to reproduce the behavior?

1. Create a new React project with the package "create-react-app"

2. Create a new JS file (choose the name you want)

3. Inside the new JS file write a new function like this:

    function foo() { console.log(this) }

4. Call the function wherever you want: inside or outside a React component. Eg. (index.js)

    import React, { Component } from "react"; import { foo } from "../../../validation/test"; import "./App.css"; class App extends Component { constructor(props) { super(props); this.state = {}; } render() { foo(); return <h1>Hello Stack Overflow Community....</h1>; } } export default App;

5. Take a look to the browser console.

I tried in a node environment, but I'm not facing this problem.

What could be the cause?

Answer 1

Did you try foo.bind(this)() instead of foo()? This way it gives the context to your function and this would refer to the class from which it was called from.

Answer 2

Now, after further research and reading, I think I am able to answer my own question.

Why " this " was undefined in the case mentioned in my question?

The keyword this is always a reference to an object ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this ). However, in my case I did not perform any operation necessary to assign the keyword this a reference to the function object, I only executed the function ( foo() ).

The image below shows the value of this keyword:

Following that, instead:

1. I created an instance of the foo() object (see the red arrow in the below image)
2. I executed the foo2() function (instance of the foo() object) within a React component and as expected, the keyword this is now referenced to the function object and I will be able to make method chaining .

Any integration or correction of my answer will be appreciated.

Thanks to all contributors.