[java script] class構文でのthisの取り扱いについて。thisが変わってしまう原因は?

jsでクラスを使っているときに出会った現象。他の言語のクラスとは考え方が違ってだいぶ遠回りしましたが、なんとか理解。メモとして残しておきます。

uncaught referenceerrorが出ていて、調べてみるとクラス内変数が思ったように参照できていない様子。

※js歴浅いのであまり自信はありません。他のプログラマーさんの情報も参考にしてください。

class構文にてインスタンス変数を準備する

jsでクラスを使うときにクラス内変数を使うなら以下のようにする必要があります。

class TestClass {
 constructor() {
  this.valueA = "値1";
  this.valueB = "値2";
 }
}

一般的なオブジェクト指向言語で学習済みな人だと混乱するところですが、jsの場合クラス内にはメソッドしか存在できません。※staticなプロパティは可。
その代わり、this.~~~という変数に値を与えると、それがクラス内変数のような振る舞いを取ります。

なので、constructorの中で設定してしまおうというのがお決まりな様子。

thisは状況によって変わってしまう!

今回、このthisが変わってしまっているパターンがあったのが困ったところ。他の言語ならthisが変わるってなかなか考えられませんよね?

jsならこういったパターンの時、thisは変わってしまいます。

//ダメパターン
class TestClass {
 constructor() {
  this.valueA = "値1";
  this.valueB = "値2";
  let target = document.getElementById("id");
  target.onclick = function() {
   alert(this.valueA); ←注意!!!!!!
  }
 }
}

実はfunction(){ }の中では、thisがfunctionにスコープ遷移してしまうので、TestClassのインスタンス変数にアクセスできなくなってしまうのです。これがclassでなければvar selfにthisを保管しておくのが慣例みたいですが、classの時にはできません。
ではどうするのかと言うと。。。

ラムダで処理を記述する

functionを使うとthisは変わってしまうので、ラムダ式(アロー関数)を使って定義し直しましょう。

//正解パターン
class TestClass {
 constructor() {
  this.valueA = "値1";
  this.valueB = "値2";
  let target = document.getElementById("id");
  target.onclick = () => {
   alert(this.valueA);
  }
 }
}

こうするとthisはTestClassインスタンスを差したままになるので、意図した使い方が出来るかと思います。

レンタルサーバはConohaWINGが最強にオススメ!

muchilogでは今までいろんなレンタルサーバやSaaSを使ってきましたが、今では全てをConohaWINGにて運営しています。

■今まで使ってきたサービス一覧
・さくらレンタルサーバ(ベーシックプラン)
・カゴヤ
・Azure
・AWS

今ではこのブログは勿論、webサービスのバックエンドやアプリのサーバ機能もConohaWINGで動かしています。
そんなConohaWINGのメリットをいくつか紹介します!

【国内最速No.1】高性能レンタルサーバーConoHa WING

無料で最大2個の独自ドメインが使える!

サイト運営に必要な独自ドメインをなんと無料で取得することが可能です!これだけでも月100円以上は運営費が節約できます。

優れた速度と安定感

私がAzureやさくらを解約した大きな理由はこれ。Conohaは非常に安定して稼働しており、ダウンタイムがほぼ発生しません。発生した場合は潔くお知らせしてくれます。
また、このブログは勿論、バックエンドとして動いてるプログラムも処理速度が大幅に向上しました(体感で倍速以上)。 Azure等のSaaSからレンタルサーバに移行するって普通考えられませんよね?しかし実際に大きなメリットを感じているのです。

頻繁に開催されるキャンペーン

ConohaWINGは半額に迫るようなキャンペーンを頻繁に開催しています。このキャンペーンによって、性能的には業界トップクラスであるにも関わらず、 月額料金換算で最安値クラスで使えるのです。
基本的に長期一括契約の方がお得になるため、muchilogでは最長で契約することをオススメします。価格と性能のバランスを考えれば他に乗り換えることも考えれられませんし。

レンタルサーバは必須です!

web系のプログラミング学習を進める際には、レンタルサーバの契約は必須と思ってください。ローカルの環境と本番環境で動作が違うことは良くありますし、ポートフォリオを公開するのも大切です。

学習や制作に集中するためにも、満足度、速度、安定度全てのレベルが高いConohaWINGを最強にオススメします!

web系サービス開発会社に転職したい!

muchilogではIT系へ転職したいという方には「自社サービスを運営しているweb系企業」への転職をおすすめしています。

web系は「自由な社風」「成長できる環境」「ホワイトな労働条件」であることが多いからです。

そんなweb系企業への転職を確実にするためのプログラミングスクールが登場しました。


RUNTEQ

RUNTEQはただのスクールじゃない!

RUNTEQはweb系の開発会社。開発会社が運営するスクールなので必要とされる技術力は勿論習得可能。しかしそれだけではないのです。

特にweb系で転職・就職活動を行う際にはポートフォリオを求められることがあります。ポートフォリオとは自分自身の作品のことで、技術力や企画力を示すものです。

RUNTEQではポートフォリオの作成を企画段階からサポートしてくれます!

他のプログラミングスクールでは提携企業の派遣やアルバイトとして就職するしかなかったりもしますが、RUNTEQはあなたの市場価値を高める方法まで教えてくれるということですね。

また、RUNTEQが扱う教材はどれも第一線で当たり前に使われている技術。特に未経験者の独学ではどうしてもスキルセットに穴が出来てしまいます。その点RUNTEQは確実に現場力を養えます。

そして2020年2月〜2021年12月までの内定者の98%がweb系企業に内定しています。これはRUNTEQの指導力とサポートが優れていることの証拠でしょう。

まずは無料説明会に申し込んではいかがでしょうか?

RUNTEQ


js
muchiをフォローする
MUCHILOG
タイトルとURLをコピーしました