Skip to content

Commit

Permalink
docs: show how to account for this (#3333)
Browse files Browse the repository at this point in the history
  • Loading branch information
liamdebeasi committed Dec 19, 2023
1 parent a278104 commit 6a76e70
Showing 1 changed file with 12 additions and 0 deletions.
12 changes: 12 additions & 0 deletions docs/troubleshooting/runtime.md
Original file line number Diff line number Diff line change
Expand Up @@ -207,3 +207,15 @@ class MyApp {
}
}
```
<!-- This is referenced in Ionic Framework component documentation so we explicitly define the anchor so it remains consistent. -->
## Accessing `this` in a function callback returns `undefined` {#accessing-this}
Certain components, such as [counterFormatter on ion-input](../api/input#counterformatter) and [pinFormatter on ion-range](../api/input#pinformatter), allow developers to pass callbacks. It's important that you bind the correct `this` value if you plan to access `this` from within the context of the callback. You may need to access `this` when using Angular components or when using class components in React. There are two ways to bind `this`:
The first way to bind `this` is to use the `bind()` method on a function instance. If you want to pass a callback called `counterFormatterFn`, then you would write `counterFormatterFn.bind(this)`.
The second way to bind `this` is to use an [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) when defining the callback. This works because JavaScript does not create a new `this` binding for arrow functions.
See its [MDN page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this) for more information on how `this` works in JavaScript.

1 comment on commit 6a76e70

@vercel
Copy link

@vercel vercel bot commented on 6a76e70 Dec 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ionic-docs – ./

ionic-docs-git-main-ionic1.vercel.app
ionic-docs-gqykycf8t.vercel.app
ionic-docs-ionic1.vercel.app

Please sign in to comment.