JS アクションパネル

this バインディング

JavaScript における this キーワードの動作原理、呼び出しパターンによる参照の変化、ES5 の bind メソッドと ES2015 のアロー関数が this に与える影響を解説します。YiDA アクションパネルで this を使用する際の注意点、特に export キーワードの役割と this の値への影響についても説明します。

1. 背景

this バインディングを理解するには、まず JavaScript における this の仕組みを把握する必要があります。
ほとんどの場合、this の値は関数の呼び出し方（実行時バインディング）によって決まります。実行中に代入することはできず、関数を呼び出すたびに異なる値になる可能性があります。ES5 では、呼び出し方に関わらず関数の this の値を設定できる bind メソッドが導入されました。ES2015 ではアロー関数が導入されました。アロー関数は独自の this バインディングを持たず、this は外側のレキシカルコンテキストの値を保持します。

this - JavaScript | MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

2. YiDA アクションパネルにおける this

JavaScript の this の仕組みを理解したうえで、YiDA のアクションパネルで関数を呼び出す際は、export キーワードが使われているかどうかを確認するだけです。
推奨事項：ページのコンテキストを一切扱わない純粋なユーティリティ関数（例：ランダムな文字列を生成する function uid() { return new Date().getTime().toString(32); }）については、export キーワードを使用しないでください。それ以外の場合は、すべてのメソッドで export キーワードを使用し、this を介して呼び出す必要があります。

例 1

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

export function b() {
  this.a(); // 正しい例。メソッド a は YiDA レンダリングエンジンのコンテキスト this に正しくアクセスできます。
  a(); // 誤った例。メソッド a は YiDA レンダリングエンジンのコンテキスト this にアクセスできません。
}

例 2

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

export function b() {
  this.a(); // 誤った例でエラーがスローされます。メソッド a は export キーワードでインポートされていないため、YiDA レンダリングエンジンのコンテキスト this を使って呼び出すことはできません。
  a(); // 誤った例。メソッド a は YiDA レンダリングエンジンのコンテキスト this にアクセスできません。
}

例 3

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

function b() {
  a(); // 誤った例。メソッド b は export キーワードを使用しておらず、this.a() を介して呼び出されていないため、メソッド a は YiDA レンダリングエンジンのコンテキスト this にアクセスできません。
}

はじめに

クイックスタート

フォーム管理

ワークフロー設計

レポート設計

集計テーブル設計

ポータル設計

カスタムページ

統合と自動化

クールアプリ

アプリ管理

プラットフォーム管理

国際化

YiDA専用版

開発者機能

this バインディング

1. 背景

this - JavaScript | MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

2. YiDA アクションパネルにおける this

​1. 背景

this - JavaScript | MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

​2. YiDA アクションパネルにおける this

1. 背景

2. YiDA アクションパネルにおける this