ES6のアロー関数におけるthisが指すもの - JavaScript

ES6のアロー関数におけるthisが指すもの – JavaScript

作成日: 2020年05月16日

JavaScript

thisが指すものを比較

従来(ES5以前)のfunction文を使ってprintParam関数を宣言した場合、 printParam関数の中のthisが指すものは、printParam関数が呼び出されたとき初めて決まる。

param = "global param"; // グローバルなプロパティとして宣言

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

printParam(); // "global param" 呼び出されたここで「this」はWindowを指すことが決定された。

let obj1 = {
param: "local obj1 param",
func: printParam
}

let obj2 = {
	param: "local obj2 param",
	func: printParam
}

obj1.func(); // "local obj1 param" 呼び出されたここで「this」はobj1を指すことが決定された。
obj2.func(); // "local obj2 param" 呼び出されたここで「this」はobj2を指すことが決定された。

param = "global param"; // グローバルなプロパティとして宣言

let printParam = function() {

console.log(this.param);

}

printParam(); // "global param" 呼び出されたここで「this」はWindowを指すことが決定された。

let obj1 = {

param: "local obj1 param",

func: printParam

}

let obj2 = {

param: "local obj2 param",

func: printParam

}

obj1.func(); // "local obj1 param" 呼び出されたここで「this」はobj1を指すことが決定された。

obj2.func(); // "local obj2 param" 呼び出されたここで「this」はobj2を指すことが決定された。

一方、アロー関数式でprintParam関数を宣言した場合は、 printParam関数の中のthisが指すものは、printParam関数を宣言した時点で決定する。宣言したらその後どこで呼び出してもthisの指すものは変わらない。

param = "global param"; // グローバルなプロパティとして宣言

let printParam = () => {
	console.log(this.param); // 宣言されたここで「this」はWindowを指すことが決定された。
}

printParam(); // "global param" 

let obj1 = {
param: "local obj1 param",
func: printParam
}

let obj2 = {
	param: "local obj2 param",
	func: printParam
}

obj1.func(); // "global param"
obj2.func(); // "global param"

param = "global param"; // グローバルなプロパティとして宣言

let printParam = () => {

console.log(this.param); // 宣言されたここで「this」はWindowを指すことが決定された。

}

printParam(); // "global param"

let obj1 = {

param: "local obj1 param",

func: printParam

}

let obj2 = {

param: "local obj2 param",

func: printParam

}

obj1.func(); // "global param"

obj2.func(); // "global param"

コメントをするコメントをキャンセル

コメントはありません。