js関数では、this指向問題およびcall()、apply()、bind()の使い方について

2058 ワード

1.js関数でのthis指向について 
      var name = "  ";
      var obj = {
        name: "  ",
        es5fun: function () {
          console.log(this);
        },
        es6fun: () => {
          console.log(this);
        },
      };
      obj.es5fun(); //obj
      obj.es6fun(); //window
      console.log(this); //window
ES 5において、関数を対象とする方法で呼び出した場合、thisは呼び出しの対象を指します.
ES 6の矢印関数では、矢印関数は自分のthisがなく、そのthisは継承されます.デフォルトでは、それを定義する時に、オブジェクト(宿主オブジェクト)ではなく、実行時のオブジェクトを指しています.ない場合は、Windowsに至るまで、インターネット上で検索されます.
2.call()、appy()、bind()の使い方
      var obj = {
        name: "  ",
        age: 99,
        myfun: function () {
          console.log(this.name + "  " + this.age);
        },
      };
      var otherObj = {
        name: "yasuo",
        age: 4,
      };

      obj.myfun(); //    99
      obj.myfun.call(otherObj); //yasuo  4
      obj.myfun.apply(otherObj); //yasuo  4
      obj.myfun.bind(otherObj)(); //yasuo  4
call()、appy()、bind()はいずれもthisというオブジェクトを再定義するためのものです.言い換えれば、オブジェクトが他のオブジェクト方法を呼び出す方法であってもよい.
call、bind、appyの状況を比較します.
var obj = {
      name: "  ",
      age: 99,
      myfun: function (kill, death) {
        console.log("  :" + this.name + "   :" + this.age + "     :" + kill + "    :" + death);
      },
    };
    var otherObj = {
      name: "yasuo",
      age: 4,
    };

    obj.myfun.call(otherObj, '0', '10'); //  :yasuo   :4     :0    :10
    obj.myfun.apply(otherObj, ['0', '10']); //  :yasuo   :4     :0    :10
    obj.myfun.bind(otherObj, '0', '10')(); //  :yasuo   :4     :0    :10
   最初のパラメータ:
     コール 、ビッド 、 appy この3つの関数の最初のパラメータはすべてです. this のオブジェクトを指します
   2番目のパラメータ:
     コール のパラメータは直接入れます.第二、第三です. n つのパラメータをすべてカンマで区切って、そのまま後ろに置いてください.
     appy のすべてのパラメータは一つの配列の中に入れなければなりません. 
     ビッド 戻るのが関数である以外は、 のパラメータと コール 同じです
     もちろん、三者のパラメータは限定されません. ストリングス 関数を含むさまざまなタイプが許可されます. 、 object など