this.valueの理解は私には難しい - hoshikuzu

属性の中で記述されている『this』が一体全体何を指すのかということを理解することは初心者の私にはとても難しいです。以下、onmouseover属性中の『this.value』が何を指しているのかについての例をあげてみます。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="ja">

<!-- saved from url=(0008)http://a -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<meta http-equiv="Content-Script-Type" content="text/javascript">

<link rel="contents" href=";http://d.hatena.ne.jp/hoshikuzu/">

<link rev="made" href="http://d.hatena.ne.jp/hoshikuzu/about">

<title>This</title>

<script type="text/javascript">

<!-- 
var value = 'value in ScriptElement';

var fs = function (x) {

    alert('fs called\n' + x); 

}; 
// -->

</script>

</head>
<body>

<p>

<textarea cols="20" rows="5" onmouseover="

fs(this.value);var ft = function () {alert('ft called\n' + this.value);};ft();

">
value in TextAreaElement
</textarea>

</p></body>

</html>

script要素の内側でグローバルに以下を記述しています。

変数として『value』。値はscript要素内で定義されていることがわかるように。
関数として『fs』。fsが呼ばれたこととそのときのargumentとを表示したい

textarea要素のonmouseover属性の内側で以下を記述しています。

関数fsにargumentとして『this.value』を与えて実行
関数として『ft』を定義。ftが呼ばれたこととそのときの『this.value』とを表示したい
関数ftを実行

このHTMLをwindowsXP上でIE6, Firefox(3.0.8), Opera(9.64)で試してみました。実行結果はみな同じでした。textarea要素もにマウスオーバーすると、script要素で定義のfsが『this.value』としてtextarea要素のvalueを表示し、textarea要素のonmouseover属性で定義のftが『this.value』としてグローバルな変数valueを表示しました。

次に、上のHTMLで登場する２か所の『this.value』を単に『value』に置き換えて見ました。いわゆる『暗黙の this』が『value』につくだろうという私の素人考えです。そうしたら、前と実行結果が変化しました。各ブラウザで、fsもftもともに、『(暗黙のthis.)value』として、textarea要素のvalueを表示したのです。

JavaScriptに堪能な方々はこれを直感的に当然のこととして受け止めることでしょう。そして私にはちんぷんかんぷんなのです。情けない…『this.value』が状況しだいで何を指すのか、また、『暗黙のthis』とは何なのか、等についての理解は私にはとても難しく感じます。
もしもできましたならば素人の私にもわかりやすい説明をお願いできればと思います。また理解を助ける初心者向けの文書へのポインタなどがありましたらご紹介くださいませ。よろしくお願い申し上げます。

※病み上がりですのでお礼や応答が遅くなるかもしれません、ご容赦くださいませ。