Google I/O にご参加いただきありがとうございました。オンデマンドでコンテンツを視聴できます。

このページは Cloud Translation API によって翻訳されました。

このキーワード

キーワード this は、バインドされているオブジェクトの値を参照します。つまり、関数の値は、関数の呼び出し時に関数をメソッドとして呼び出すか、スタンドアロン関数として呼び出すか、コンストラクタ。

関数が呼び出されると、キーワード this のインスタンスが作成され、シーンをその関数を含むオブジェクトへの参照として指定し、そのスコープ内で定義されているプロパティとメソッドへのアクセスが可能です。 this の操作は、宣言された変数の操作といくつかの点で類似しています const に置き換えます。定数と同様に、this は削除できず、その値も削除できません。再割り当てされますが、this キーワードによって指定されたオブジェクトのメソッドとプロパティは変更できます。

グローバルバインディング

関数またはオブジェクトのコンテキストの外側で、this は「 globalThis プロパティ。これは、ほとんどのケースでグローバルオブジェクト構築できます。ウェブブラウザで実行されるスクリプトのコンテキストでは、グローバルオブジェクトは window オブジェクトです。

this;
> Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, ...}

Node.js では、globalThis は global オブジェクトです。

$ node
Welcome to Node.js v20.10.0.
Type ".help" for more information.
> this
<ref *1> Object [global] {
...
}

厳格モード外では、this はスタンドアロンモード内のグローバルオブジェクトも参照します。親 Window は実質的に「所有」するオブジェクトであるため、使用できます。

function myFunction() {
    console.log( this );
}
myFunction();
> Window {...}

(function() {
    console.log( this );
}());
> Window {...}

厳格モードを使用する場合、スタンドアロン内で this の値は undefined になります。関数:

(function() {
    "use strict";
    console.log( this );
}());
> undefined

厳格モードを導入する前は、this の null 値または undefined 値グローバルオブジェクトへの参照に置き換えられます。場合によっては「デフォルトバインディング」と呼ばれるグローバルバインディングこれは従来の動作によるものです

暗黙的バインディング

関数がオブジェクトのメソッドとして呼び出されると、オブジェクト内の this のそのメソッドは、メソッドを含むオブジェクトを参照し、メソッドとプロパティが含まれています。

let myObject = {
    myValue: "This is my string.",
    myMethod() {
            console.log( this.myValue );
    }
};

myObject.myMethod();
> "This is my string."

this の値は、関数とその関数がどのように含まれるオブジェクトを定義します。代わりに、this の値のコンテキストは次のようになります。現在の実行コンテキスト。この場合の実行コンテキストは、 myObject オブジェクトが myMethod メソッドを呼び出しているため、myObject が値です。（this）。前のセクションでは、これは専門的なことのように思えるかもしれません。例ですが、this のより高度な使用法では、留意してください。

一般に、this は、前後のコードで想定されない方法で使用します。指定することもできます。このルールの例外は ES5 です。アロー関数。

アロー関数内の `this`

アロー関数では、 this は、 語彙を包含する環境。つまりアロー関数の this は、その関数の this の値を参照します。最も近いものを含むコンテキスト:

let myObject = {
    myMethod() { console.log( this ); },
    myArrowFunction: () => console.log( this ),
    myEnclosingMethod: function () {
        this.myArrowFunction = () => { console.log(this) };
    }
};

myObject.myMethod();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }

myObject.myArrowFunction();
> Window {...}

上記の例では、myObject.myMethod() は myObject をオブジェクトとしてログに記録します。「所有」するそのメソッドですが、myObject.myArrowFunction() は globalThis を返します。（または undefined）。アロー関数内の this のインスタンスは、代わりに、最も高い範囲のスコープが参照されます。

次の例では、myEnclosingMethod により、指定された値にアロー関数が作成されます。実行時にそのオブジェクトが含まれるオブジェクトです。内部の this のインスタンスアロー関数が、エンクロージャー内の this の値を参照するようになりましたこれがアロー関数を含むメソッドです。これは、 myEnclosingMethod 内の this の値が myObject を参照しているアロー関数を定義します。アロー関数内の this も参照します。 myObject:

let myObject = {
    myMethod() { console.log( this ); },
    myEnclosingMethod: function () {
        this.myArrowFunction = () => { console.log(this) };
    }
};

myObject.myEnclosingMethod();
myObject.myArrowFunction();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }

明示的バインディング

this を使用するほとんどのユースケースは、暗黙的バインディングで処理されます。ただし、 特定の実行を表すために this の値が必要になる場合があります。コンテキストを使用します。説明用のものであり、若干古い方も setTimeout のコールバック関数内で this を使用する場合、このコールバックには固有の実行コンテキストがあるからです。

var myObject = {
  myString: "This is my string.",
  myMethod() {
    console.log( this.myString );
  }
};
myObject.myMethod();
> "This is my string."

setTimeout( myObject.myMethod, 100 );
> undefined

setTimeout のこの特定の欠点は、その後、同様の「喪失」の問題this についてはすでに対応済みですスコープのスコープ内で this の値への明示的な参照を作成することで、コンテキストです。this のインスタンスが割り当てられ、従来の方法では that、self、_this などの識別子を使用して変数に代入する構築できます。これらは、変数の共通の識別子規則で、 this の値を渡しました。

call()、bind()、apply() メソッドを使用して関数を呼び出すと、 this は、呼び出されているオブジェクトを明示的に参照します。

let myFunction = function() {
    console.log( this.myValue );
}

let myObject = {
   "myValue" : "This is my string."
 };

myFunction.call( myObject );
> "This is my string."

var myObject = {
  myString: "This is my string.",
  myMethod() {
    console.log( this.myString );
  }
};

setTimeout( myObject.myMethod.bind( myObject ), 100 );
> "This is my string."

明示的バインディングは、暗黙的バインディングによって提供される this 値をオーバーライドします。

let myObject = {
    "myValue" : "This string sits alongside myMethod.",
    myMethod() {
        console.log( this.myValue );
    }
};
let myOtherObject = {
    "myValue" : "This is a string in another object entirely.",
};

myObject.myMethod.call( myOtherObject );
> "This is a string in another object entirely."

this の値が次のように設定されるような方法で関数を呼び出した場合、 undefined または null。その値は strict 外の globalThis に置き換えられます。 mode:

let myFunction = function() {
    console.log( this );
}

myFunction.call( null );
> Window {...}

同様に、this にプリミティブを与える方法で関数が呼び出された場合その値は <start>指定されたプリミティブ値のラッパーオブジェクト厳格モード外:

let myFunction = function() {
    console.log( this );
}

let myNumber = 10;

myFunction.call( myNumber );
> Number { 10 }

strict モードでは、渡された this 値はオブジェクトに強制変換されません。プリミティブ値、null、undefined 値であっても、次のように処理されます。

"use strict";
let myFunction = function() {
    console.log( this );
}

let myNumber = 10;

myFunction.call( myNumber );
> 10

myFunction.call( null );
> null

`new` バインディング

class をコンストラクタとして使用する際に new キーワードの場合、this は新しく作成されたインスタンスを参照します。

class MyClass {
    myString;
    constructor() {
        this.myString = "My string.";
    }
    logThis() {
        console.log( this );
    }
}
const thisClass = new MyClass();

thisClass.logThis();
> Object { myString: "My string." }

同様に、new を使用して呼び出されるコンストラクタ関数内の this の値は、作成されるオブジェクトを指す:

function MyFunction() {
  this.myString = "My string.";
  this.logThis = function() {
    console.log( this );
  }
}
const myObject = new MyFunction();

myObject.logThis();
> Object { myString: "My string.", logThis: logThis() }

イベントハンドラバインディング

イベントハンドラのコンテキストでは、this の値は、それを呼び出します。イベントハンドラのコールバック関数内では、this を意味します。ハンドラに関連付けられた要素を参照します。

let button = document.querySelector( "button" );

button.addEventListener( "click", function( event ) { console.log( this ); } );

ユーザーが前のスニペットの button を操作すると、結果は次のようになります。 <button> 自体を含む要素オブジェクト:

> Button {}

アロー関数をイベントリスナーコールバックとして使用する場合、 this も、最も近い包含実行コンテキストによって提供されます。上部つまり、イベントハンドラコールバック関数内の this が globalThis（または、strict モードでは undefined）:

let button = document.querySelector( "button" );

button.addEventListener( "click", ( event ) => { console.log( this ); } );
> undefined

他のオブジェクトと同様に、call()、bind()、apply() を使用する場合はメソッドを呼び出し、イベントリスナー this のコールバック関数を参照できます。オブジェクトを明示的に参照します。

let button = document.querySelector( "button" );
let myObject = {
    "myValue" : true
};
function handleClick() {
    console.log( this );
}

button.addEventListener( "click", handleClick.bind( myObject ) );
> Object { myValue: true }

理解度をチェックする

ウェブブラウザで実行しているスクリプトの場合、グローバルオブジェクトは this が関数またはどうすればよいでしょうか。

window オブジェクト

browser オブジェクト

undefined オブジェクト

このキーワード

グローバル バインディング