Med Java

User Tools

Site Tools

Trace:
java-script:function-context

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
java-script:function-context [2023/08/09 14:46] – odeftajava-script:function-context [2023/08/09 14:52] (current) – odefta
Line 218: Line 218:
 </note> </note>
  
-==== How to access the context of a parent function inside a nested (child) named function ====+==== How to access the context of a parent object inside a nested (child) named function ====
  
-Here we'll need to assign the context of the parent function to a variable that the nested function can access. \\ This is commonly done by **assigning this to a variable, often named self or that**, in the parent function's scope.+Here we'll need to assign the context of the parent object to a variable that the nested function can access. \\ This is commonly done by **assigning this to a variable, often named self or that**, in the parent object's scope.
  
 Example: Example:
 <code javascript> <code javascript>
-const parentFunction = {+const parentObject = {
   parentValue: 'Hello from parent!',   parentValue: 'Hello from parent!',
   childFunction: function() {   childFunction: function() {
Line 238: Line 238:
 }; };
  
-parentFunction.childFunction(); // Outputs: Hello from parent!+parentObject.childFunction(); // Outputs: Hello from parent!
 </code> </code>
  
-==== How to access the context of a parent function inside a nested (child) arrow function ====+==== How to access the context of a parent object inside a nested (child) arrow function ====
  
 Using an **arrow function** can simplify the code because arrow functions **don't have their own this** context; they inherit it from the enclosing function. This means you don't need to store the parent's context in a separate variable. \\  Using an **arrow function** can simplify the code because arrow functions **don't have their own this** context; they inherit it from the enclosing function. This means you don't need to store the parent's context in a separate variable. \\ 
Line 247: Line 247:
  
 <code javascript> <code javascript>
-const parentFunction = {+const parentObject = {
   parentValue: 'Hello from parent!',   parentValue: 'Hello from parent!',
   childFunction: function() {   childFunction: function() {
Line 259: Line 259:
 }; };
  
-parentFunction.childFunction(); // Outputs: Hello from parent!+parentObject.childFunction(); // Outputs: Hello from parent!
 </code> </code>
  
-By using an arrow function for the inner function, we automatically capture the value of this from the enclosing childFunction method. This allows the inner function to access the properties and methods of the parentFunction object without needing to assign this to a separate variable. +By using an arrow function for the inner function, we automatically capture the value of this from the enclosing childFunction method. This allows the inner function to access the properties and methods of the parentObject without needing to assign this to a separate variable. 
 \\ It's a cleaner and more concise way to write code that depends on maintaining the context of this across different levels of nested functions. \\ It's a cleaner and more concise way to write code that depends on maintaining the context of this across different levels of nested functions.
  
java-script/function-context.1691581619.txt.gz · Last modified: 2023/08/09 14:46 by odefta