JavaScriptにおけるthisキーワードの使用比較

4924 ワード

JavaScriptにおけるthisキーワードの使用比較
thisのキーワードはJavaScriptの中で、使ったのは比較的に多いとは言えないで、とても多いです.thisのキーワードに詳しい各種の法則が非常に重要です.
thisは時々私たちがよく話している文脈です.これは相手を指すものです.それは柔軟で変わりやすいです.時にはそれが対象であることを見て、時にはwindow宿主の対象です.
1.thisは宿主の対象を指す.
function myWindow() {
    this.id = 1; //    window.id = 1
    console.log(this); //    this  window 
    console.log(this.id); // 1
}
myWindow();
このような状況は一般的で、つまり、ホストオブジェクトを指す場合、クライアントはwindow であり、nodeではGlobal の第1の話であり、次に第2の種類を見る.
2.thisが関数のオブジェクトを呼び出すとき
function myObj() {
    console.log(this.x); //         obj  
}
var obj = {};
obj.x = "xx";
obj.myObj = myObj;
obj.myObj(); // xx
ここのmyObj()関数の中のthisは、Objという外部から伝わってくるオブジェクトを指しています.ここでobj.myObj()を参照してください.ここでは、myObjはObjというオブジェクトの方法であり、次のObjはオブジェクトとしてmyObjという関数を呼び出しますので、ここでのthisは呼び出し関数の対象となります.
3.thisが構造関数によって生成された新しいオブジェクトを指すとき
//                  
function People(gender) { 
    this.gender = gender;
    this.sayGender = function() {
        console.log(this.gender);
    }
}

//   man,  this   People{}  
var girl = new People("women"); 

//   women,  this   girl{gender:"women"}  
girl.sayGender(); 
ここの実行過程を整理して、まずobj.という文はいくつかのことをしました.
  • 構築関数に基づいて空のオブジェクトPeople{}
  • を作成します.
  • は次にPeopleに伝えます.
  • そしてここで始まった関数の中のthisは、新しいPeople{}オブジェクトが入ってきたことを指します.
    ここでは構造関数生成オブジェクトの簡単なプロセスです.自分でシミュレーションして次のように実行できます.
    4.this属性を引き継ぐ対象を指す場合(appyとcall)
    function People(gender) { 
        this.gender = gender;
        this.sayGender = function() {
            console.log(this.gender);
        }
    }
    
    var sally = new People("women");
    
    var bob = { // bob       ,    sayGender     
        gender: "man";
    }
    
    だからここでボブがnew People("man")の方法を使うとどうやって破れますか?この時はsayGender()またはapply()を使うべきです.この二つの方法は同じです.
  • appy(obj,argments)ここのargmentsはパラメータ配列
  • です.
  • call(obj,argment)ここには複数
  • がありません.
    したがって、bobがcall()を呼び出すには、sayGender()方法またはcall()方法が必要である.
    これは継承の一つとして理解できます.Javaの継承は継承の実現とインターフェースの継承の二つに分けられています.JavaScriptの継承は継承の実現のみです.しかし、JavaScriptの継承を実現するためには、プロトタイプチェーンの継承など、ここのapply()apply()も継承の一つです.
    function People(gender) { 
        this.gender = gender;
        this.sayGender = function(str) {
            console.log(this.gender);
        }
    }
    
    var sally = new People("women");
    
    var bob = { // bob       ,    sayGender     
        gender: "man";
    }
    
    sally.sayGender("       ?"); //        ?women
    sally.sayGender.call(bob,"       ?"); //        ?man
    
    ここで最後のコードの実行過程を分析します.
  • は、bob{gender:“man”というオブジェクトをPeople内に渡す
  • .
  • 変更関数の中のthisは
  • を指します.
  • 継続実行関数内の他のコード
  • ここで、bobというオブジェクトは、他のオブジェクトのいずれかを継承するための方法を継承するときに、上記のような書き方をすることができます.
    また、thisの関数内の指差は実に多くの種類があります.環境によって判断します.
    次に、appyの例を開始します.call()の例を始める前に、基本的な知識を普及させます.
    まず次の概念の配列を普及させます.クラスの配列は実は私たちが普段接しているものが多いです.例えば、関数内のfunction.call(obj, argument)は、apply()ではなくarguments ということに注意してください.argmentsは配列ではなく対象ですが、私たちが普段使っているときはarguments という書き方が好きなので、配列のように見えます.クラス配列の通常の定義は、1つのレングス属性を維持することと、数字の下に基づいて要素を取得することができるarguments のような1つのオブジェクトである.
    信じないならテストしてもいいです.
    function arrayLike() {
        console.log(arguments instaceof Array); // false
        console.log(arguments instaceof Object); // true
    }
    arrayLike();
    
    実はJavaScriptの中の配列オブジェクトは関連配列と呼ばれています.つまり、私達のデータベーステーブルのようなキー-値ペアの形です.ですから、JavaScriptが他の言語のようにサイクルを最適化できると思ったら、arguments[0]のようなプロセスをもっと考えてください.さらに、JavaScriptのオブジェクト内部実装も関連配列であり、例えば、キーを0と定義し、他のオブジェクトの値を設定することができます.
    var obj = {
        0: "12345"
    }
    var arr = ["12345"];
    console.log(obj[0]); // 12345
    console.log(arr[0]); // 12345
    
    JavaScript内部の実現はとても簡単だと思いますか?あるいは原理は基本的に一つですが、簡単な点属性を加えることによって、オブジェクトと配列は全く違って見えるようになります.実は内部の実現原理は同じです.
    無駄話が多いです.arguments[0]方法の例を見てみます.
    function People(gender) { 
        this.gender = gender;
        this.sayGender = function() {
            var str = Array.prototype.join.call(arguments,""); // arguments    
            console.log(str + this.gender); // 
        }
    }
    
    var sally = new People("women");
    
    var bob = {
        gender: "man"
    }
    
    var textArr = "       ?".split(""); //            
    
    sally.sayGender.apply(bob, textArr); //        ?man
    
    ここまでにしましょう.興味のある人はメッセージを残して検討してもいいです.