関数もオブジェクトということを忘れないためのコード

何をしたかったの？

• vue.jsを解析する際に引っかかったこと

1. はて、Vueオブジェクトの定義が見つからない
2. Vue関数の定義しかない
3. もしかして：Vue関数をオブジェクトとして使ってる!?

• というわけで、検証用のコードを作ってみました。HTML側は適当に書けばOKです（あんまり重要じゃないし）

コード

understand_vue.js

// Vue.jsのソース解析を習熟するためのソース
// Vueの最初の初期化が関数定義だったため、ちゃんと動くのか、どのように動くのか検証するために実装した
(function(param){
  function SomeObj(options){
    console.log(options.msg+"Hi! "+param+" / instance of SomeObj? : " + (this instanceof SomeObj));
  }

  SomeObj.prototype.hoge = function(v){
    console.log("[X]"+v);
  }

  function ex1(Obj){
    Obj.p = param;
  }

  ex1(SomeObj); // Vue関数がひとつのオブジェクトとして存在していることを意味している

  console.log(SomeObj.p);

  v = new SomeObj({msg:"[Create]"}); // new 命令でVueというクラスのインスタンスにもなることも示している

  v.hoge(param);

  SomeObj({msg:"[Call]"});

}('Some Obj is Here!'));

実行結果

• 結果はコンソールに表示されます

Some Obj is Here!
[Create]Hi! Some Obj is Here! / instance of SomeObj? : true
[X]Some Obj is Here!
[Call]Hi! Some Obj is Here! / instance of SomeObj? : false

まとめ

関数を定義するとそれ自体もオブジェクトとして扱えるのを失念しやすいのでこの際覚えよう！