JavaScriptのthisについてメモ

Published: 2016年3月2日 by tomsato

■ 概要

JavaScriptのthisについてまとめます
thisにも色々あるみたいなので違いについて調べます

JavaScript勉強シリーズ

■ thisの種類

JavaScriptのthis参照はオブジェクトを参照する場所によって参照先が異なる

  • トップレベルコード (関数外)
  • 関数内

また関数内でもその関数の呼び出し方法で参照先オブジェクトが変わる

関数の呼び出し方法 this参照の参照先オブジェクト
コンストラクタ呼び出し 生成したオブジェクト
メソッド呼び出し レシーバオブジェクト ※1
applyあるいはcall呼び出し applyまたはcallの引数で指定したオブジェクト
それ以外の呼び出し グローバルオブジェクト

※1 レシーバオブジェクトとは
オブジェクトのメソッドを呼んだ時に、演算子の左辺に指定したオブジェクト

コンストラクタ呼び出しにおけるthis

コンストラクタ呼び出し時のthis参照はコンストラクタが生成するオブジェクトを参照する

// 定義
function TestClass(x) {
  this.x = x;
}

// コンストラクタ呼び出し
var obj = new TestClass(3);
print(obj.x); // 3

newをつけてインスタンスを生成する
thisには生成されたインスタンス自身(TestClass)が入っている

コンストラクタ呼び出し時には、何も持たないオブジェクトを作成して、コンストラクタ内のthis参照からそのオブジェクトが参照される
最終的にnewを結果としてオブジェクトの参照が返る

メソッド呼び出し

メソッドとはオブジェクトのプロパティが参照する関数

// オブジェクト定義
var myObj = {
  x: 3,
  show: function() {
    print(this.x);
  }
}

// メソッド呼び出し
myObj.test(); // 3

オブジェクトmyObjがレシーバオブジェクトでshowがメソッド
thisにはmyObjが入っている

apply,call呼び出しにおけるthis

これらを使うと呼び出した関数内のthis参照を指定した任意のオブジェクト参照にできる
つまりレシーバオブジェクトを明示的に指定できると見なせる

var myObj = {
  x: 3
  show: function() {
    print(this.x);
  }
};
var hogeObj = {
  x: 7
}

myObj.show(); // 3

myObj.show.apply(hogeObj); // 7
myObj.show.call(hogeObj); // 7

ちなみにapplyとcallの違いは2番目以降の引数が
「連続した引数のリスト」か引数の配列を1つだけ受け取るか違いみたい
http://www.sirochro.com/note/js-call-apply-difference/

参考

コメントを書く

※ 個別に返信が必要な時のみご記入ください

※ Emailは公開されません

※ 承認されると名前・コメントが下記に表示されます

コメント一覧

最近の投稿

ビジュアルリグレッションテストについてまとめ、ネットで調べると数多くのライブラリがありどれがどんな立ち位置なのか全体像がわかりずらかったのでどんな種類があるのか入門の入門としてまとめます、またPlaywrightを使って実際に触ってみました

社内ツールなどの超小規模なAPIをGolangで実装する際にフレームワークを使うべきかを、実際にnet/httpを使った実装とフレームワークを使った実装を比較することでどれだけ優位性があるかを見ていきたいと思います。今回はフレームワークにはシンプルで使いやすそうなEchoを使うことにします。

vue-pdfを使ってNuxt.jsで作成しているアプリケーションに pdfスライドを表示させるサンプルを作成しました README.md通りに実装してもうまくいかないところがあったのでそのあたり含めてまとめます

Vue.js / Nuxt.jsにおけるログインの実装方法をまとめる Auth0やNuxt.jsのAuth Moduleとmiddlewareについて調べつつサンプルを作成することで理解を深める

コンポーネント設計について考える Atomic DesignやPresentational Component, Container Componentについてまとめつつ 自分だったらVue.js / Nuxt.jsでどういうコンポーネント設計にするかについてまとめます

カテゴリ一覧

タグ一覧