初心者のjavascript～thisの大実験～
初心者のjavascript～thisの大実験～
javascriptのthisって難しいですよね！そこで今回はjavascriptのthisを使って色々実験しようと思います
実験1 そのままthisをアラート画面に出力してみる
<script>
function mythis1(){
alert(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>
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>
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>
var special={
kudamono: "みかん",
test: function(){
alert(this);
}
}
function mythis4(){
special.test();
}
</script>
<button onclick="mythis4()">実行結果を見る</button>
結果は
[object Object]
やった～変わった～といいたいことだけどこの後何をやってもそれでした笑
とりあえず諦めが肝心なのでまたthisが出てきた時に追記していきます。
