From 4a7a1b69e7aa71366ec5c7463bcda1ad45a7780c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 18 Dec 2023 15:13:58 -0500 Subject: [PATCH 1/4] docs: show how to account for this --- docs/troubleshooting/runtime.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/troubleshooting/runtime.md b/docs/troubleshooting/runtime.md index 6163d233ef5..5595e10748b 100644 --- a/docs/troubleshooting/runtime.md +++ b/docs/troubleshooting/runtime.md @@ -207,3 +207,14 @@ class MyApp { } } ``` + + +## 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 developers bind the correct `this` value if they plan to access `this` from within the context of the callback. Developers 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 a developer wanted to pass a callback called `counterFormatterFn`, then they 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 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this for more information on how `this` works in JavaScript. From 1dbc433618074679d89b48e19205b678f820d19a Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 18 Dec 2023 15:23:08 -0500 Subject: [PATCH 2/4] lint --- docs/troubleshooting/runtime.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/troubleshooting/runtime.md b/docs/troubleshooting/runtime.md index 5595e10748b..5bc69e2b6db 100644 --- a/docs/troubleshooting/runtime.md +++ b/docs/troubleshooting/runtime.md @@ -209,6 +209,7 @@ class MyApp { ``` + ## 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 developers bind the correct `this` value if they plan to access `this` from within the context of the callback. Developers may need to access `this` when using Angular components or when using class components in React. There are two ways to bind `this`: From 9d2ec320f5df2774f83f319a98e6e3de133aa1de Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 19 Dec 2023 09:29:49 -0500 Subject: [PATCH 3/4] Update docs/troubleshooting/runtime.md Co-authored-by: Maria Hutt --- docs/troubleshooting/runtime.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/troubleshooting/runtime.md b/docs/troubleshooting/runtime.md index 5bc69e2b6db..b5683c8321e 100644 --- a/docs/troubleshooting/runtime.md +++ b/docs/troubleshooting/runtime.md @@ -218,4 +218,4 @@ The first way to bind `this` is to use the `bind()` method on a function instanc 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 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this for more information on how `this` works in JavaScript. +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. From 314ef0246e4f6a4dccad70ad3cc7f536259f12d6 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 19 Dec 2023 17:16:08 -0500 Subject: [PATCH 4/4] Update docs/troubleshooting/runtime.md Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> --- docs/troubleshooting/runtime.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/troubleshooting/runtime.md b/docs/troubleshooting/runtime.md index b5683c8321e..c0466b288f9 100644 --- a/docs/troubleshooting/runtime.md +++ b/docs/troubleshooting/runtime.md @@ -212,9 +212,9 @@ class MyApp { ## 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 developers bind the correct `this` value if they plan to access `this` from within the context of the callback. Developers may need to access `this` when using Angular components or when using class components in React. There are two ways to bind `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 a developer wanted to pass a callback called `counterFormatterFn`, then they would write `counterFormatterFn.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.