2016-04-18 11 views
2

私はオブジェクトとして 'this'を使用せず、オブジェクトとして 'this'を渡さずに関数を直接記述し、this.src = ""関数に直接書くのはなぜですか? thisその特定img要素を指すimgタグ、内部javascriptの関数で引数としてオブジェクトを渡す必要があるのはいつですか?

<body> 
<script type="text/javascript"> 
    function picture(yolo){ 
    yolo.src="3Nail.jpg"; 
    } 

    function normal(yolo) { 
    yolo.src="4Nail.jpg"; 
    } 
</script> 

<img onmouseover="picture(this)" onmouseout="normal(this)" src="1nail.jpg" alt="n1"/> 
<img onmouseover="picture(this)" onmouseout="normal(this)" src="2nail.jpg" alt="n2"/> 

+2

function picture(){ this.src="3Nail.jpg"; } function normal() { this.src="4Nail.jpg"; } 

HTMLたちを表示します。 – Bergi

+0

'this'キーワードは、異なるスコープにあるときには何か異なることを意味します。それがうまくいかない理由です。 – Bergi

+0

ねえ、onmouseoverイベントハンドラを使ってこれらの関数を呼び出しています – Dheeraj

答えて

1

。ここでは、関数内でthiswindowとなります。一般に、関数内のthisは、関数が属するオブジェクトを参照します。

したがって、imgタグからその要素を渡さずに関数を呼び出すと、関数は更新する要素を知る方法がありません。もちろん、関数内でクエリセレクタを使用して必要なものを取得することはできますが、常に同じ要素を更新したい場合にのみ機能します。

2

関数がイベントハンドラに関連付けられていないため、thisはグローバルウィンドウオブジェクトを参照します。変数yoloを引数として使用する必要を避けるために、以下に示すように、callを使用して、これをコンテキストとして呼び出すことによって、このバインディングを関数に渡すことができます。あなたはこれらの関数を呼び出しているか

JS

<img onmouseover="picture.call(this)" onmouseout="normal.call(this)" src="1nail.jpg" alt="n1"/> 
<img onmouseover="picture.call(this)" onmouseout="normal.call(this)" src="2nail.jpg" alt="n2"/> 
+0

ありがとうございました! 。コールは本当に便利です – Dheeraj

関連する問題