javascriptのエラー原因がわからない

Question

class sample{
    searchavailavle(){
      var arr=[]
      for(var i=0;i<8;i++){
      for(var j=0;j<8;j++){
        if(this.isavailable([i,j])){
          arr.push([i,j])
        }
      }
      }
      return arr
    }

    randomput(){
      var arr=this.searchavailavle();
      var randnum =  Math.floor( Math.random() * arr.length )
      console.log(arr);
      this.putstone(arr[randnum])}



    check(id){
      var y=parseInt(id/10)
      var x=id%10
      this.putstone([y,x])
      setTimeout(this.randomput(),1000);//←該当の問題箇所
    }

}
var x=new Board(8);
x.check(24)

上記のようなコード(一部抜粋)を書いたのですが、これを実行すると下記のようなエラーが発生します

timers.js:121
    throw new ERR_INVALID_CALLBACK(callback);
    ^

TypeError [ERR_INVALID_CALLBACK]: Callback must be a function. Received undefined

これはthis.randomput()が関数ではないよ、ということらしいのですがネットで情報を調べていたところかっこを外せばいいということらしいので(なぜカッコを外すと別の何かになるのかも知りたいですが）おそらく関数の戻り値をそのままsetTimeoutに入れてしまってるんだろうな、と想像しながら下記のようにコードを変えてみました。

setTimeout(this.randomput,1000);

すると今度は

      var arr=this.searchavailavle();
                   ^

TypeError: this.searchavailavle is not a function

のように出てきてしまいました。
関数の中で関数を呼び出しているだけなのになぜこのようなエラーがおこるのでしょうか？
ちなみに、setTimeoutで括らないと普通に即時実行されます。
２日くらいこの問題に向き合ってますが一向に解決できません。
お助けのほどよろしくお願い申し上げます。

Comments

[kei344]

「コードを変えてみました」と有りますが、コードが変わっていないようです。

Answer 1

setTimeout(()=>this.randomput(),1000)ではどうでしょう？

Comments

[babbleman]

いけました！！なぜでしょう。
自分も関数にしないといけないのかなと思いまして下記のように変えてみたりもしましたが駄目でした。
setTimeout(function(){this.randomput()},1000)

[miyabi-sun]

`function(){}`で包むと新しくthisが作られるので
randomputメソッド内で「this.xxxなんて存在しないじゃないか！」と叱られます

ES2015という新しい仕様で追加された`() => {}`というアロー関数は
thisを生成しないのでメソッド内で使い回すにはとても使い勝手が良いものになります。

this束縛が切れるあたりの話は私の回答も見て下さいね。

Answer 2

setTimeout(this.randomput(),1000);

変数等の後にカッコをつけるのは、
JavaScriptに於いては「関数・メソッドの実行」を意味します。

このrandomputメソッドを実行するタイミングはsetTimeoutによる1000ミリ秒後想定ですよね？
ならば今実行してはいけません。

setTimeout(this.randomput,1000);のようにカッコ無しに変更することで
setTimeoutの中の処理の方が引数の関数を1秒後に勝手に実行してくれるようになります。

this.searchavailavle is not a function

setTimeout(this.randomput,1000);に変更したことで
thisの束縛が剥がれた事が原因です。

JSの関数は引数に関数やメソッドを投げ込んで後から実行が出来る言語です。
しかし、メソッドをこのように引数として他人に受け渡してしまうとthisの束縛が切れてしまいます。

JavaScriptでは関数とメソッドの違いが明確には区切られて無く
同じFunctionオブジェクトを関する同じものです。
なのでthisを束縛するbindメソッドが用意されています。

デモの部分が英語で「うっ……」となりそうなので翻訳

// オブジェクトを宣言しておく
// 動作的にはクラス・インスタンスとほぼ同じになるので再現するだけならこれで十分
const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
}

// 質問文は関数の引数として利用したが、
// 変数にメソッドを束縛してもthisが切り離されてしまう
const unboundGetX = module.getX;
console.log(unboundGetX());
// undefined

// thisはこれなんだよと明示してあげる
const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// 42 <- module.xの数値が正しく取り出せた

これと同じでこのようにすれば動きます。
setTimeout(this.randomput.bind(this), 1000);

Comments

[babbleman]

なるほど！関数の所有権の問題だったんですね。下のコメントの方も拝見させて頂きましたが、javascriptでは関数もオブジェクトとして扱っており、(確か元々class構文がなくfunctionで代替していたとみた事があります)新しいオブジェクトとして作られてしまったと言うことなんですね。アロー関数は完全にメソッドとしてなっておりオブジェクトを生成しない、と言う認識ですね。