JavaScriptのthisを復習

時々混乱するので、メモとして書き残しておく。

基本概念「thisがなにを指すかは実行時に決まる。その関数をもつオブジェクト。」

var taro = {
    name: "Taro",
    hello: function(){
        alert("Hello! " + this.name);
    }
}
var hanako = {
    name: "Hanako"
}
hanako.hello = taro.hello;
var helloFunc = taro.hello;
</code>
<script id="script" type="text/javascript">
var taro = {
    name: "Taro",
    hello: function(){
        alert("Hello! " + this.name);
    }
}
var hanako = {
    name: "Hanako"
}
hanako.hello = taro.hello;
var helloFunc = taro.hello;
</script>

<p>
    taro.hello();<button onClick="taro.hello()">Exec</button>→"Hello! Taro"
    taroオブジェクトに属する関数helloを実行
</p>
<p>
    hanako.hello();<button onClick="hanako.hello()">Exec</button>→"Hello! Hanako"
    hanakoオブジェクトに属する関数helloを実行
</p>
<p>
    helloFunc();<button onClick="helloFunc()">Exec</button>→"Hello! " (window.nameは"")
    helloFunc関数を実行(this未指定はトップレベルオブジェクトになる。windowなど)
</p>
<p>
    helloFunc.call(taro);<button onClick="helloFunc.call(taro)">Exec</button>→"Hello! Taro"
    helloFunc関数を、taroオブジェクトをthisとして扱うように実行
</p>
<p>
    helloFunc.call(hanako);<button onClick="helloFunc.call(hanako)">Exec</button>→"Hello! Hanako"
    helloFunc関数を、hanakoオブジェクトをthisとして扱うように実行
</p>

コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください