2

引数を渡そうとすると、thisがグローバルオブジェクトを指します
・この書き方の場合は、イベントハンドラ関数ではなくてただの関数扱いになる、ということでしょうか?

function clickHandler(ev, str) {
  alert(this);
};

var button = document.getElementById("click-target");

button.addEventListener("click", function(ev) {
  clickHandler(ev, "test");
}, false);
<button id="click-target">Click me</button>

2 件の回答 2

2

javascriptのthisは関数の呼び出し方により変わります。
すべて理解するのは難しいので、とりあえず、以下の3種類を覚えておけば問題ないと思います。

  1. new演算子を使用している
    →thisは作成されるインスタンス

    (例)
    new func();
    new instance.func();

  2. new 演算子を使用せず、xxxx.func();という形
    →thisはxxxx部分

    (例)
    instance.func();
    instance1.instance2.func();

  3. 関数そのまま実行
    →thisはグローバルオブジェクト(window)
    (厳格モード(use strict)ではundefined)

    (例)
    func();


サンプル

func関数を色々な呼び出しでthsに何が入るか確認するサンプル

function func(no){
   $('#log')
       .append('【'+ no +'】')
       .append('  ' + (this instanceof func))
       .append('   ' + typeof this)
       .append(' ⇒  ')
       .append(this.toString())
       .append('<br>');
}

// (0) 準備 funcを色々のものに代入
// test1はObject
// test2は関数オブジェクト
// test3は関数
var test1 = {};
test1.func = func;

var test2 = function(){ return 'test2_func'; };
test2.func = func;

function test3(){ return 'test3_func'; }    
test3.func = func;

// (1) new演算子の場合、thisは作成されたインスタンス
new func('new[1]');
new test1.func('new[2]');
new test2.func('new[3]');
new test3.func('new[4]');

// (2) xxxx.funcという形の場合、xxxx部分
test1.func('xxx.func[1]');
test2.func('xxx.func[2]');
test3.func('xxx.func[3]');
    
// (3) 関数そのままの場合、window
func('そのまま');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id='log'></div>


例外1(bind)

すべての関数はbind関数が実装されており、この関数を用いる事でthisを固定化した関数を作成できます
(古いブラウザーは実装されていません)

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

function func(){}
var obj = {};
var bindFunc = func.bind(obj);  // bind関数で新たに関数が作成される
bindFunc();                     // この関数を呼ぶと、func関数が実行され
                                // thisはbind関数の第一引数のものとなる

例外2(apply/call)

すべての関数はapply/call関数が実装されており、この関数を用いる事で関数の呼び出し時にthisを指定する事ができます
(addEventListenerの第2引数で渡した関数のthisが変わるのも、この関数によるものだと考えられます)

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call

function func(){}
var obj = {};
func.apply(obj);                // 第一引数がthisとしてい使用される
func.call(obj);                 // 第一引数がthisとしてい使用される
                                // apply/callの違いは、実行する関数に引数があった場合の引数の渡し方が異なります

最後に、例えばaddEventListenerに渡されたthisをclickHandlerのthisにする場合

button.addEventListener("click", function(ev) {
  clickHandler.call(this, ev, "test");  // callの第一引数にaddEventListenerのthisを渡す
}, false);
2
  • 「最後に、例えばaddEventListenerに渡されたthisをclickHandlerのthisにする場合」は、どこに該当するのでしょうか? 「3.関数そのまま実行」? それとも、例外3?
    – re9
    Commented 2016年2月6日 1:01
  • 例外2のcallを使用してthisを調整した例です。 「3.関数そのまま実行」ではthisはwindowになります(元々の質問が関数そのまま実行でthisがwindowになってますよね?)質問に『イベントハンドラ関数ではなくただの関数』と記載されていますが、javascriptにおいて関数はどれも一緒です。重要なのは関数がどのように実行されたかで、その実行方法でthisが変わります。addEventListenerに渡した関数のthisが変わっているのも、中でapplyもしくはcallを使用してthisを調整しているためです。
    – hiro
    Commented 2016年2月6日 11:56
1

そうです。this が指すものは呼び出し方によって変わります。

function method() {
    alert(this); 
};

method(); // window

var obj = {};
obj.method = method;
obj.method(); // object

method と obj.method は同じものですが、直接 method() を呼び出すと this には window が入り、obj.method() で呼ぶと obj が入っています。

addEventListener の場合には、function(ev){ } でくくらずに、次のように clickHandler 自体を渡すのも手かと思います。

var button = document.getElementById("click-target");

function clickHandler(ev) {
  // this は button (HTML Element)
  // ev は MouseEvent
  alert(this);
};

button.addEventListener("click", clickHandler, false);
<button id="click-target">Click me</button>

2
  • addEventListener において、function(ev){ } で括った場合は、clickHandler 自体は渡っていないのでしょうか?
    – re9
    Commented 2016年2月6日 1:04
  • @re9 その場合addEventListenerに渡っているのはclickHandlerそのものではなく、clickHandlerを呼び出す無名関数ですね。
    – unarist
    Commented 2016年2月22日 23:50

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。