コース: ウィークリー Web プログラミングシリーズ

今すぐコースを受講しましょう

今すぐ登録して、24,000件以上登録されている、業界エキスパート指導のコースを受講しましょう。

アロー関数式のthis参照はfunctionとどう違うのか

アロー関数式のthis参照はfunctionとどう違うのか

コース: ウィークリー Web プログラミングシリーズ

1ヶ月の無料トライアルを開始 法人向けサービス

アロー関数式のthis参照はfunctionとどう違うのか

“

こんにちは、フロントエンド開発や ウェブ技術についての 執筆、講習を行なっている野中文雄です。 今週は ECMAScript 2015 の 新しいアロー関数式で this 参照が function とどう違ってくるのか 説明します。今開いている HTML ドキュメントなんですけれども script 要素はありますが まだコードが書かれていません。 ではここにコードを書いて見たいと 思うんですが、this 参照が function とそれからアロー関数式とでは 違いますということなんですけれども まずは通常の function ですね。 function で checkProp という名前にします。 そして checkProp という名前の通り プロパティーをチェックするんですが まずはこの一番グローバルな所ですね prop という名前で変数、 プロパティーと考えてもいいですけれども ０を設定します。 そしてここでは確認です。 console.log で this.prop です そうするとこれを普通に呼び出せば この値０が呼び出せるんだろうと console に０が出てくるだろう ということは想像つくと思うんですが もう一つこの関数を定める オブジェクトを作ります。 const で object で そして まずは prop という名前のプロパティー ここには１を入れます。 それから次にこの関数を object のメソッドとして 定めることにします。コピーして まずメソッド名は同じですね。 そしてそれに対して 同じ名前ですけれども この関数を設定するということに なりますね。 さてではこの２つ、呼び出して みましょう。まずは普通に checkProp グローバルに対して呼び出してますね。 次は今度は object から object に対して checkProp という風に呼び出します。 そうすると どの数字が出てくるか ということですね。 ファイルを保存してブラウザーで 確かめます。 ブラウザーでウィンドウを リロードします。そうすると ０と１という２つの数字が 出てきました。 JavaScript の function というのはこのように どこから呼び出したかによって this 参照は変わるんですね グローバルに対して呼び出せば グローバルの this…

目次