2017年2月10日金曜日

JavaScript thisについて考える

MDNには、JavaScriptのthisは、C++なんかの言語とは動作が違うと書かれてる。
thisは、コンストラクターとしてのfunctionのために作られたみたいで、コンストラクター以外では、意味のないものらしい(厳密には、call,apply,bindではthisは、有効になる)

function fn1(){
  var a="abc";
  console.log(this.a);
}

fn1.();   // undefined
fn1.call({a:"fff",}); // fff

thisのうまく動作しない例
function fn2(){
    this.a = "abc";
    this.subfn1 = function(){setTimeout( this.subfn2,1000);}
    this.subfn2 = function(){console.log(this.a);}
}
var a = "window scope";
var xx = new fn2();

xx.subfn1();   // window scope

仕様どうりの動作なのだ。プログラマとしては、abcを出力してほしいのだがそうはならない。
thisは、実行環境を返すというわけのわからない仕様なのだ。
xx.subfn1()とsetTimeoutのコールバックとでは、実行環境が違うのだそうだ。そんなことはプログラマにはわからないし、言語仕様としては不自然である。なんとなく、実装ミスをそのまま仕様にしたような感じがする。

きちんと動作させるために
function fn2(){
    var self = this;   // <==こんなこと
    this.a = "abc";
    this.subfn1 = function(){setTimeout( self.subfn2,1000);}
    this.subfn2 = function(){console.log(self.a);}
}
var xx = new fn2();
xx.subfn1();    // abc

 こんなこと   "var self = this" するのだが、
thisなんか使わなくてもできてしまう。

function fn2(){
    var self = {
      a : "abc",
      subfn1 : function(){setTimeout( self.subfn2,1000);},
      subfn2 : function(){console.log(self.a);},
    }
    return self;
}
var xx = fn2();
xx.subfn1();    // abc



0 件のコメント:

コメントを投稿