かなこと仲良く数学、無料のオンライン学習塾

主に数学と数学に関するプログラミングを扱っています。小学生~大学入試までの算数と数学の問題と詳しい解説をしていきます。普通の生徒はコメント欄で質問し放題です! 特別生徒は一名募集していて毎週日曜日に専用の問題が出て、ツイッターで質問し放題です笑

初心者のjavascript~thisの大実験~

初心者のjavascript~thisの大実験~

javascriptのthisって難しいですよね!そこで今回はjavascriptのthisを使って色々実験しようと思います

実験1 そのままthisをアラート画面に出力してみる

<script>
function mythis1(){
alert(this);
}
</script>
<button onclick="mythis1()">実行結果を見る</button>

結果は

[object Window]

と出ました。

windowのオブジェクトが入ってるんですね。


実験2 何か変数を定義してからthisを使ってみる

<script>
function mythis3(){
this.hensu2="変えたい";
alert("thisは"+this+"でhensu2は"+hensu2+"でthis.hensu2は"+this.hensu2+"です。");
}
</script>
<button onclick="mythis2()">実行結果を見る</button>

これも結果は

[object Window]

と出ました。

変わってなかったです。笑 変えてみたいですね。


実験3 次は変えたい笑

次は変えたいのでthis.変数に何か入れてからにしてみます

<script>
function mythis3(){
this.hensu2="変わって";
alert(”thisは"+this+"でthis.hensu2は"+this.hensu2+"です。");
}
</script>
<button onclick="mythis3()">実行結果を見る</button>

結果は

thisは[object Window]でhensu2は変えたいでthis.hensu2は変えたいです。

ちょっと変わったけどthis自体はobject Windowで変わらなかったです


実験4 変数に処理内容を入れるやつでやってみる

専門用語ではメソッドっていうみたいです。

javaでもあったようななかったような

私は難しい言葉や解釈がめちゃめちゃ苦手で変数に処理内容を入れるやつって呼んでます笑 めちゃ覚えやすいのでおすすめです笑

<script>
var special={
kudamono: "みかん",
test: function(){
alert(this);
}
}

function mythis4(){
special.test();
}
</script>
<button onclick="mythis4()">実行結果を見る</button>

結果は

[object Object]

やった~変わった~といいたいことだけどこの後何をやってもそれでした笑

とりあえず諦めが肝心なのでまたthisが出てきた時に追記していきます。