thisはなぜいるのか

Question

this.now = new Date().toLocaleString();

のthisはなぜ必要なのでしょうか？

now = new Date().toLocaleString();

ではダメなのでしょうか？

<div id="app">
<button v-on:click="onclick">
Click!
</button>
<p>
{{ now }}
</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

とhtmlにかき

var app = new Vue({
el:'#app',
data:{
now:''
},
methods:{
onclick:function(){
this.now = new Date().toLocaleString();
}
}
})

とjsに書きました。

Comments

[think49]

なぜコードを書いた人に直接尋ねないのでしょう？コードの意図はコードを書いた本人でなければ、分かりません。

[m.ts10806]

実際に試された上なのですよね？もっと自身が試したことや調べたことを記載してください。またこれまでの質問とかわって急に「Vue.js」のタグがなくなっていますが、どのような意図がありますか？

Answer 1

そこはクラスを定義しているように見えなくもないですが、疑似的にそれっぽくかけるようvuejsが計らってくれているだけだと思います。なので、nowとかいてもthis.nowと解釈してくれるわけではません(app(vueインスタンス)のプロパティやメンバとして解釈してくれるわけではない)。

で、それらしくかけるようにするために、質問された個所のthisにはapp(vueのインスタンス)が入っていて、this.nowと書く必要があるわけです。デバッガでthisが何かを確認してもらえばわかります。

※用語が正しいか不安ですが、そんなかんじです。