Browse By

JavaScriptのthisとは?

Pocket

JavaScriptのthisとは?

thisとは?

thisとは関数が呼び出された際に、その関数が属していたオブジェクトを指します。

function Person (name){
    this.name = name;
};

Person.prototype.sayName = function(){
    console.log("hello "+ this.name);
};

var taro = new Person("Taro");
taro.sayName(); // hello Taro;

上記のtaro.sayName()の場合saynameはtaroに属していることになるので、taroがこの関数内のthisになります。このときtaro.sayNameを渡しているのではなくsayNameに入っている関数オブジェクトを渡して実行しています。

また下記のように単なる関数呼び出しの際は、thisはグローバルオブジェクトを返します。

function sayName(){
 console.log("hello "+ this.name);
}

sayName();

thisを指定する

thisは呼び出しもとで決定しますが、下記のメソッドを使用してthisを指定することができます。

  • call(thisに指定したいオブジェクト, arg1, arg2, …)
  • appy(thisに指定したいオブジェクト, [arg1, arg2, ...])
  • bind(thisに指定したいオブジェクト, arg1, arg2, …)

callとapplyメソッドは第二引数以降が異なり、applyはArray型の引数を一つだけ受け取ります。またこれらのメソッドは関数をすぐに実行するのに対して、bindは呼び出されたときに新しい関数を生成し値を指定します。

function Person(name){
    this.name = name;
}

function sayName(arg1, arg2){
    console.log(arg1 + this.name + arg2);
}

var taro = new Person("taro");

// call
sayName.call(taro, "my name is", "tanaka"); // my name is taro tanaka

// apply
sayName.apply(taro, ["my name is", "tanaka"]); // my name is taro tanaka

// bind
var sayNameTaro = sayName.bind(taro);
sayNameTaro("My name is ", " tanaka"); // My name is taro tanaka

入門 React.js その1
入門 React.js その2 JSXについて
入門 React.js その3 Hello world!してみよう


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>