0Pricing
JavaScript Academy · レッスン

thisの基本、call/apply/bind（入門）

functionやmethodでthisが何を指すかを理解し、arrow functionのthisとcall/apply/bindを体験します。

「thisの基本、call/apply/bind（入門）」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。

thisの導入

目標: 呼び出し方によってthisが何を参照するかを確認し、アロー関数のthisを学び、call/apply/bindを少しずつ試します。

  • メソッド呼び出しと通常の呼び出し
  • アロー関数のthis
  • call/apply/bind
thisの基本、call/apply/bind（入門） — イラスト1

メソッド呼び出しのthis

メソッド呼び出しでは、thisはドットの前にあるオブジェクトを指します。

// Method call: this is the object before the dot
const user = {
  name: "Ayla",
  say() {
    console.log("I am", this.name);
  }
};

user.say();
thisの基本、call/apply/bind（入門） — イラスト2

通常の呼び出しのthis

通常の呼び出しでは、strict modeのthisはundefinedです。strict modeを使用しないブラウザーでは、windowになる場合があります。

// Plain function call: this is undefined in strict mode
function show() {
  console.log("this is", this);
}

show();
thisの基本、call/apply/bind（入門） — イラスト3

アロー関数のthis（レキシカル）

アロー関数は外側のthisを使用します（レキシカル）。メソッド内のコールバックに適しています。

// Arrow functions do not have their own this
// They capture this from the surrounding scope
const team = {
  title: "Blue",
  start() {
    const report = () => {
      console.log("Team:", this.title);
    };
    report();
  }
};

team.start();
thisの基本、call/apply/bind（入門） — イラスト4

callとapplyの比較

callとapplyは、指定したthisで関数をすぐに実行します。

// call/apply invoke the function with a chosen this
function intro(lang1, lang2) {
  console.log("User:", this.name, "knows", lang1, "and", lang2);
}

const person = { name: "Mina" };

// call passes arguments normally
intro.call(person, "JS", "TS");

// apply passes arguments as an array
intro.apply(person, ["JS", "TS"]);
thisの基本、call/apply/bind（入門） — イラスト5

bindの基本

bindは、選択したthisを今後の呼び出しのために保持する新しい関数を返します。

// bind creates a new function with this fixed
function sayHi() {
  console.log("Hi from", this.name);
}

const dev = { name: "Lena" };

const sayHiFromLena = sayHi.bind(dev);

sayHiFromLena();
sayHiFromLena();
thisの基本、call/apply/bind（入門） — イラスト6

bindとcall/applyのクイズ

クイックチェック: thisの固定

thisの基本、call/apply/bind（入門） — イラスト7

まとめ

まとめ: メソッド呼び出しではthisがオブジェクトになり、strict modeの通常の呼び出しではthisがundefinedになります。アロー関数は外側のthisを取り込み、call/applyは1回の呼び出しでthisを設定し、bindは後の呼び出しのためにthisを固定します。

thisの基本、call/apply/bind（入門） — イラスト8

よくある質問

「thisの基本、call/apply/bind（入門）」レッスンは無料ですか？

はい。「thisの基本、call/apply/bind（入門）」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。

「thisの基本、call/apply/bind（入門）」で何を学びますか？

functionやmethodでthisが何を指すかを理解し、arrow functionのthisとcall/apply/bindを体験します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。

「thisの基本、call/apply/bind（入門）」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. DeclarationとExpression、Arrowの基本
  2. Parameter、Default、Rest、Return
  3. thisの基本、call/apply/bind（入門）
← JavaScript Academyに戻る