About This Binding

​

1. Background

• To understand this binding, you first need to understand how this works in JavaScript.
• In most cases, the value of this is determined by how a function is called (runtime binding). It cannot be assigned during execution, and it may differ each time the function is called. ES5 introduced the bind method to set the value of a function’s this regardless of how the function is called. ES2015 introduced arrow functions, which do not provide their own this binding (this retains the value of the enclosing lexical context).

​

2. This in the YiDA Action Panel

• Once you understand how this works in JavaScript, you only need to check whether the export keyword is used when calling functions in the YiDA action panel.
• Recommendation: For pure utility functions that do not involve any page context—for example, generating a random string with function uid() { return new Date().getTime().toString(32); }—do not use the export keyword. Otherwise, all methods must use the export keyword and be invoked with this.

export function a() {
  console.log(this);
}

export function b() {
  this.a(); // Correct. Method a can access the YiDA rendering engine context this.
  a(); // Incorrect. Method a cannot access the YiDA rendering engine context this.
}

function a() {
  console.log(this);
}

export function b() {
  this.a(); // Incorrect and throws an error. Method a is not imported via the export keyword, so it cannot be called using the YiDA rendering engine context this.
  a(); // Incorrect. Method a cannot access the YiDA rendering engine context this.
}

export function a() {
  console.log(this);
}

function b() {
  a(); // Incorrect. Method b does not use the export keyword and is not called via this.a(), so method a cannot access the YiDA rendering engine context this.
}