JavaScript-thisの指針に対する新しい理解

10216 ワード

今までのthisに対する理解は、使えるだけで、その本質を深く追究していませんでした.今回は、「JavaScript The Good Parts」を借りて、深く理解しました.(すべてのデバッグはコンソールで見られます.ブラウザF 12キー)
これを見てみましょう.
     関数を宣言する時、各関数には定義時のparameters(形参)以外に、自身には追加の二つのパラメータがあります.一つはthisで、一つはargments(実参)です.アーグメンントとは、関数が実際に受けたパラメータで、クラスの配列です.argments簡単な紹介しかしません.thisの針に重点を置いています.
オブジェクト指向の変化において、thisは非常に重要であり、その値は呼び出しモードに依存する.JavaScriptでは、全部で4つの呼び出しモードがあります.方法呼び出しモード、関数呼び出しモード、構造関数呼び出しモード、appy呼び出しモード.
  • メソッド呼び出しモード
  • 一つの関数がオブジェクトとしての属性である場合、私たちは通常この関数をオブジェクトと呼ぶ方法です.この方法が呼び出されると、thisはこの方法の属するオブジェクトを指す.
    <script type="text/javascript">
        var people = {
            name : "Yika",
            sayName : function(){
                console.log(this.name);   //"Yika"
                            //this      people    
            }
        }
        people.sayName();
    </script>
    栗の示すように、thisはsayNameの対象を指しています.このように、thisを通じて対象文脈を取得する方法は、公共の方法です.(publice method)
  • 関数呼び出しモード
  • 関数が呼び出されたときは、オブジェクト上の方法ではなく、関数として呼び出されます.
    このモードの呼び出しは、windowオブジェクトを指します.この関数が外部関数で呼び出されたかもしれませんが、栗を見に来ました.
     1 <script type="text/javascript">
     2     var name = "window-Yika";
     3     var people = {
     4         name : "people-Yika",
     5         student : function(){
     6             console.log(this);   //   this      people
     7             function sayName(){
     8                 var name = "sayName-Yika";
     9                 console.log(this.name); //window-Yika
    10           //  sayName         people    name ,  this   window 
    11             };
    12             sayName();
    13         }
    14     }
    15 
    16     people.student();
    17 </script>    
     
    このように見ると、JavaScriptという「設計ミス」をどうやって解決したらいいのか分かりますか?
    はい、student関数の中で、つまり6行目で、thisをキャッシュします.そして、thisを変数に移してsayName関数に移せば解決できます.
    var people = {
            name : "people-Yika",
            student : function(){
                var self = this; // this    
                function sayName(){
                    var name = "sayName-Yika";
                   console.log(self.name); //"people-Yika",   self    people  
                };
                sayName();
            }
        }
  • 構築関数呼び出しモード
  • JavaScriptでコンストラクションに言及すると、頭の中に「関数名が大文字!呼び出すときはnewで操作します!」関数名が大文字で分かりやすいのは、統一コンストラクションの命名を規範化するためです.しかし、なぜnewを使うのかを深く研究したことがありますか?関数の前にnewを持って呼び出したら、関数のバックグラウンドはこの関数プロトタイプに向けた新しいオブジェクトを作成します.そして、thisも新しいオブジェクトに結び付けられます.JavaScriptはプロトタイプに基づく言語です.プロトタイププロトタイプに対してプロトタイプを継承します.よく分からない学生は自分で資料を調べてもいいです.私はthisに重点を置いています.
    まず、構造関数の長さはどうですか?
    <script type="text/javascript">
        function People(name){
            this.name = name;    //   this, new          Yika    
         this.sayName = function(){   console.log(this.name); //   }
    }
      var Yika = new People("Yika");
    Yika.sayName();
    // “Yika" , Yika new ,this Yika 。 </script>
    一見、よく分からないようですが、どうして先ほど関数の中のthisはwindowを指していましたか?キャッシュを使わずにPeople関数を指すことができますか?
    大丈夫です.さっきは関数がnewで呼び出されて、陰で自分で「悪いことをする」と言っていましたが、一緒にどんなことをしたか見てみます.
    <script type="text/javascript">
        function People(name){
            var that = {};   //
            that.name = name;
            that.sayName = function(){
                console.log(that.name);
            };
            return that;    //   ,     return   ,return      
        }
        var Yika = People("Yika"); //      new,    new   
        Yika.sayName(); //       "Yika"
    </script>
     
    このように見ればわかるでしょう.newは一つのオブジェクトを生成するだけでなく、自動的にreturnというオブジェクトを作るので、自然にこの新しいオブジェクトを指します.
    newで構造関数を呼び出さなければならないということを忘れてはいけません.問題が起きたら警告がないです.すべての大文字での約束はやはり必要です.
  • Apple呼び出しモード
  • apply方法は、コール関数に伝達するパラメータ配列を構築し、また、this値を変更することを可能にします.
    function.apply(thisバインディングの値、argmentsパラメータ配列)
    applyと言ってもいいものが多すぎます.ここでは栗だけを挙げて理解してあげます.
    <script type="text/javascript">
        function People(name){
            this.name = name;
            this.sayName = function(){
                console.log(this.name);   //sayName       People     
            }
        }
        function Student(name){
            People.apply(this, arguments);//           ,   Student     ,  apply  People    ,   People this 
                                          //      Student   ,    People    
        }
        var student = new Student("Yika");
        student.sayName(); //  “Yika”
    </script>
    私たちはappyで簡単に関数のthisバインディングオブジェクトを修正できます.appyと似たような方法でcallも同じ効果があります.興味のある学生は自分で検索して勉強してみてください.
     
    はい、ようやくthisの4つの呼び出しモードを変更しました.方法の呼び出しモードとコンストラクションモードの呼び出しモードはもっと多く使われます.もっと重要な点もあります.関数の呼び出しモードはその中の落とし穴を避けるようにします.
    間違いがあったら、すぐに反映してください.他の人を誤解させないように修正します.ありがとうございます.