Javascriptでのthisについて - Computer programming and health

thisついて

オブジェクトを操作するときに利用する特殊な変数が「this」です。関数呼び出しの際に、その所有者のオブジェクトを示めします。

オブジェクトに関数を設定した場合におけるthisのサンプル

const obj1 = {
name: ‘これはobj1です’,
test: function() {
console.log(this);
}
};
console.log(obj1);

console.log(obj1); で呼び出しみましょう。するとオブジェクトの内容が示されます。

「 name: ‘これはobj1です’,」、「test:f()」、「prototype:Object」

const obj1 = {
name: ‘これはobj1です’,
test: function() {
console.log(this);
}
};
obj1.test();

次はobj1.test();として関数を呼び出し、thisには何が反映されるかみてみましょう。すると同じくオブジェクト内容、「 name: ‘これはobj1です’,」、「test:f()」、「prototype:Object」が表示されます。

クラスを作成した場合のthisについて

class mycla {
constructor(){
this.name = ‘クラスでのthis’
}
test(){
console.log(this);
console.log(this === instance)
}
}
const instance = new mycla();
console.log(instance);

myclaをnew、そして変数instanceに代入しクラス化しました。

そしてコンソールでinstanceを呼び出し確認すると、「 name: ‘これはobj1です’,」、「constructor:class mycla」「test:f test()」、「prototype:Object」というinstanceの中身が表示されました。

次はtestメソッドのconsole.log(this);を確認してみましょう。この時のthisは何を表示するでしょうか。

class mycla {
constructor(){
this.name = ‘クラスでのthis’
}
test(){
console.log(this);
}
}
const instance = new mycla();
instance.test();

答えは同じく「name: クラスでのthis」などinstanceの中身が表示されます。

ここでの関数でのthisはその所有者である、myclaの内容として受け取られることになります。

すなわちここでのthis.nameのthisは、「クラス、myclaにおけるここ(this)でのnameは」、’クラスでのthis’という。ということを示す意味になります。

アロー関数と通常の関数における異なるthisが示すオブジェクト

関数にはfunctionとアロー関数の2つの記述方法がありますが、どちらにも代替できます。

しかし、thisの選ばれ方においてはアロー関数とfunctionでは異なってきます。

console.log(obj) では、「 name: ‘これはobjです’, test: f」が表示されます。

では、次にobj.test()としてアロー関数と通常のfunction関数を見てみましょう。

すると、アロー関数ではtest関数のthisが所有者として扱われ「 name: ‘これはobjです’, test: f」が表示されます。

一方、通常のfunction関数ではtest関数のthisが無視され「window」と所有者オブジェクトが不在と扱われています。

現在は2つの関数定義を適宜選ぶ必要があると下記、著書では記述されています。

この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。