JavaScriptのthisを学ぶ

以下のページでJavaScriptを体系的に学んでいます。 www.mojage.club

本記事は、JavaScriptのthisについて纏めています。

Sponsored Link

this

ファンクションを生成すると、thisが裏で作成されます。これは、そのファンクションのスコープ内であれば全てのプロパティとメソッドを参照できます。

    var cody = {
      living : true,
      age : 23,
      gender : 'male',
      getGender : function(){return this.gender;}
    };
    
    console.log(cody.getGender());  // 'male'

thisが指すもの

thisはどこで呼ばれたかによって、参照する先が変わります。ファンクションがグローバルスコープで呼ばれたら、windowオブジェクトを指すし、あるオブジェクトのメソッドとして呼ばれたら、そのオブジェクトを指します。

    var foo = 'foo';
    var myObject = {foo: 'I am myObject.foo'};
    var sayFoo = function() { 
      console.log(this['foo']);
    };
    myObject.sayFoo = sayFoo;
    
    myObject.sayFoo();  // I am myObject.foo
    sayFoo();           // foo

入れ子関数内でのthis

入れ子関数内ではwindowを参照してしまいます。

    var myObject = { 
      func1: function() {
        console.log(this); // myObject
        var func2 = function() {
          console.log(this) // window
          var func3 = function() {
            console.log(this); // window
          }();
        }(); 
      }
    }
    
    myObject.func1();

call()apply()thisをコントロールする。

thisは呼び出し元のオブジェクトを参照しますが、call()apply()を使用することによって、thisが指すものを操ることが出来ます。

    var myObject = {};
    var myFunction = function(param1, param2) {
      this.foo = param1; 
      this.bar = param2; 
      console.log(this)
    };
    myFunction.call(myObject, 'foo', 'bar');  // Object {foo = 'foo', bar = 'bar'}
    console.log(myObject) // Object {foo = 'foo', bar = 'bar'}

newキーワード

thisを内包した関数をnewキーワードを使って、他の変数に呼び込んた場合、thisの指す対象はその新しい変数に変わります。

    var Person = function(name) {
      this.name = name || 'john doe'; 
    }
    var cody = new Person('Cody Lindley'); 
    console.log(cody.name); // Cody Lindley

プロトタイプメソッドの呼び出し

thisはプロトタイプメソッドの呼び出しにも使用できます。

    var Person = function(x){
      if(x){this.fullName = x};
    };
    Person.prototype.whatIsMyFullName = function(){
      return this.fullName;
    }
    var cody = new Person('cody lindley');
    var lisa = new Person('lisa lindley');
    console.log(cody.whatIsMyFullName(),lisa.whatIsMyFullName());  // cody lindley lisa lindley
    
    Object.prototype.fullName = 'John Doe';
    var john = new Person();
    console.log(john.whatIsMyFullName()); // John Doe