詳しくはJavaScriptの中でthisは問題を指します.

6853 ワード

JSの中のthisはいつも人に頭が痛い問題を指しています.新米であろうとベテランであろうと、詳しく調べないと、本当にthisが倒れていることが分かりません.今日、私達は一緒にthisの倒れるどういうことを見て、詳しくはthisが原則を指すことを理解して、もう硬い背がなくて、もうthisのために心配しなくなりました.
前置きthisはJavascript言語のキーワードです.関数が動作する時に自動的に生成される内部オブジェクトを表します.関数の内部でのみ使用できます.関数を使う場合によって、thisの値が変わります.しかし、全体的な原則があります.つまり、thisの指向は関数定義の時には確定できません.関数実行時にのみ、thisが誰を指しているのかを確認できます.実際にはthisの最終的な方向は、その関数を呼び出す対象です.それでは、この問題について詳しくお話しします.例1
function a(){
    var user = "Zoro";
    console.log(this.name); //undefined
    console.log(this); //Window
  }
  a();
  window.a();//      
上記のように、thisの最終的な方向は、その関数を呼び出すオブジェクトです.ここでは、aはwindowオブジェクトによってポイントされます.
例2
var obj = {
    name: 'Zoro',
    f1: function () {
      console.log(this.name);//Zoro
    }
  };
  obj.f1();
もう一つのポイントthisの指向は関数定義の時には確定できません.関数実行時にのみthisが誰を指しているのか確認できます.この例のthisがあるf 1関数は、Objオブジェクトによって呼び出されるので、ここのthisは、Objオブジェクトを指し、
例三thisを徹底的に知るには、次のいくつかの例を見なければならない.
var obj = {
    a: 5,
    b: {
      a: 10,
      fn: function () {
        console.log(this.a); //10
      }
    }
  };
  obj.b.fn();
thisの最終的な指すのではなく、その関数を呼び出す対象ですか?ここはなぜobjの対象を指していないのですか?ここで3点を追加する必要があります.
  • もし一つの関数にthisがあるとしても、一級上のオブジェクトに呼び出されないと、thisはwindowを指します.
  • 関数にthisがあると、この関数は前のレベルのオブジェクトによって呼び出されます.thisは前のレベルのオブジェクトを指します.
  • の関数にthisがあると、この関数には複数のオブジェクトが含まれていますが、この関数は最も外側のオブジェクトによって呼び出されていますが、thisが指し示すのはその上のレベルのオブジェクトだけです.
  • これを見たら、基本的にはthisの指し方の原則をマスターしたと思います.もう一度呟きます.thisの指し示しは関数の定義の時には確定できません.関数の実行時にのみ、thisが誰を指すのかを確認できます.実際にはthisの最終的な指し示すのはその関数を呼び出す対象です.
                                       this         
    
    構造関数(newキーワード)の場合
    function Student() {
        this.name = 'Zoro';
      }
      var s1 = new Student();
      console.log(s1.name);//Zoro
    ここでオブジェクトs 1が関数Studentの中のnameを注文できるのは、newキーワードがthisの指向を変えることができるので、このthisをオブジェクトs 1に向ける.
    //new         
     1.              .
     2.    this        .
     3.   this            .
     4.                       .
    タイマーの中のthisの向き
    var num = 0;
      function Obj() {
        this.num = 1;
        this.getNum1 = function () {
          console.log(this.num);
        };
        this.getNum2 = function () {
          setInterval(function () {
            console.log(this.num);
          }, 1000);
        };
      }
      var o =  new Obj();
      o.getNum1();//1   (o.num)
      o.getNum2();//0  (window.num)
    o.getNum 2()の値が0である理由は、ここのthisはwindowを指し、また私たちのthisの指し示す原則を説明します.thisの指し示しは関数が定義されている時には確定できません.関数が実行されている時にのみ、thisが誰を指すかを確定できます.実はthisの最終的な指し示すのは、その呼び出し関数の対象です.
    解:this.numの関数はタイマーset Interval内のfunction(){consolie.logs(this.num)}であり、thisの指向原則に従って、この関数が実行されると、thisはその上位のオブジェクトを指す.set Intervalは、またset Intervalがwindowのポイントから出たので、thisはwindowを指します.
    call、appy、bindが向きを変える
    var num = 0;
      function Obj() {
        this.num = 1;
        this.getNum1 = function () {
          console.log(this.num);
        };
        this.getNum2 = function () {
          setInterval(function () {
            console.log(this.num);
          }.bind(this), 1000);//  bind this        
        };
      }
      var o =  new Obj();
      o.getNum1();//1   (o.num)
      o.getNum2();//1  (o.num)
    
    説明:bind()方法は、結合関数によって呼び出されると、新しい関数を作成して、最初のパラメータを新しい関数として実行する方法です.
    原則によると:
    bindメソッドを使用していない前:呼び出し時:this.numは、その関数を呼び出すオブジェクト、つまりwindow.setTimeoutオブジェクトを指します.bindメソッドを使用した後:呼び出しられた場合:元のthisを再び指す→get Sum 2関数(新しいthisがある関数)を呼び出すオブジェクトです.ここのコンストラクタはnewで呼び出すので、oオブジェクトを指します.
    bind方法はこの場合によく使われています.もちろんcallやappyを使って代用してもいいです.得られた結果も正しいですが、コールやappyの方法は呼び出し後すぐに実行されます.そのまま延長効果がなくなり、タイマーも意味がありません.
    以上をまとめると、この文章のすべての内容になります.本文は皆さんの勉強や仕事に少しでも役に立つと思います.小编はレベルが限られていますので、ご同行の先辈の皆様にもよろしくお愿いします.