小池啓仁 ヒロヒト応援ブログ By はてな

小池啓仁(コイケヒロヒト)の動画など。

小池啓仁 ヒロヒト応援ブログ By はてな

JavaScriptでのthisとapplyの関係とは

JavaScriptのthisは、自分自身のオブジェクトを参照するキーワードです。
JavaScriptのオブジェクトは、誤解を恐れず言ってしまうとすべて関数です。
(グローバルオブジェクト(大きな関数)や配列(メソッドの無い関数)もある意味関数ととらえられる)


一方、applyですが、一般的には、「当てる」とか「適応する」という意味です。
また、すべての関数は、仕様的にthisとapplyを持っています。


で、apply関数は、他関数が保持しているapply関数にthisを第一引数にしてコールし、他関数をあたかも自オブジェクトに当ててしまうものなのです。


つまり、JavaScriptでのthisとapplyの関係とは、他関数オブジェクトが保持しているapplyメソッドの引数にthisをセットしてコールすると、自関数オブジェクトになってしまう関係かな。
言葉だと、わかり辛いのでサンプルを見てください。

function aContructor() {
    this.aVal1 = 1;
    this.aVal2 = 2;
    this.aFun1 = function() {alert(this.aVal1);}
    this.aFun2 = function() {alert(this.aVal2);}
}
function bContructor() {
    aContructor.apply(this);
    this.bVal = 3;
    this.bFun = function() {alert(this.bVal);}
}
var x = new bContructor();
alert("------------------");
alert(x.aVal1);
alert("------------------");
alert(x.aVal2);
alert("------------------");
alert(x.bVal);
alert("------------------");
x.aFun1();
x.aFun2();
x.bFun();

そう、上記サンプルは、オブジェクト指向的には bContructorがaContructorを継承していますね。
ちなみに、今回はapply関数の第二引数は有りませんが、有る時は、他関数のすべての引数を配列形式にして渡します。
これに関しては、以下のリンク先を参照願います。


尚、本コンテンツは以下を大変参考にさせていただきました。