JS基礎編--this応用詳細

目次
1、thisはグローバル変数2として、対象方法としての呼び出し3、コンストラクタとしての呼び出し4、appy呼び出し
thisはJavascript言語のキーワードです.関数が動作する時に自動的に生成される内部オブジェクトは、関数の内部でのみ使用できます.関数が使用される場合によっては、thisの値が変わります.しかし、一つの原則があります.つまり、thisとは、関数を呼び出す対象のことです.
1、thisをグローバル変数とします.

var name = "The Window";
var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};
　　　　}
};
console.log(object.getNameFunc()()); //The Window

2、対象方法としての呼び出し
関数はまた、あるオブジェクトの方法として呼び出すことができます.この場合、thisはこの上位オブジェクトを指します.

function test2(){
    console.log("x  ",this.x);
　　}
　　var o = {};
　　o.x = 1;
　　o.m = test2;
　　o.m(); // 1

方法がある対象の内部にある場合、thisはこの方法の上位対象を指します.これにより、最外層の方法の上位対象はwindowグローバルオブジェクトであることが分かります.
3、コンストラクタとして呼び出す
構造関数とは、この関数を通して新しいオブジェクトを生成することです.このとき、thisはこの新しいオブジェクトを指します.

function test3(){
    　　　　this.x = 1;
　　}
　　var o = new test3();
　　console.log("x  ",o.x);// 1

4、アプリコール
apply()は関数オブジェクトの一つの方法で、関数を変更する呼び出しオブジェクトとして機能し、最初のパラメータは変更後の呼び出しの対象を表します.したがって、thisとは、この最初のパラメータのことです.

var x = 0;
　　function test4(){
　　　　alert(this.x);
　　}
　　var o={};
　　o.x = 1;
　　o.m = test4;
　　o.m.apply(); //0

apply()のパラメータが空の場合は、グローバルオブジェクトをデフォルトで呼び出します.そのため、この場合の運転結果は0で、thisが全体のオブジェクトを指すことを証明しています.最後の行のコードをo.m.applyに変更したら(o)//1運転結果が1になりました.この時のthisが対象であることが証明されました.
通常の関数呼び出しでは、thisは、コンテキストコードをアクティブにするコーディネーターによって提供されます.すなわち、関数を呼び出す親コンテキストです.thisは関数を呼び出す方式に依存します.
どのような状況でも正確にthis値を決定するためには、この重要な点を理解し、記憶する必要があります.関数を呼び出す方法が呼び出されたコンテキストのthis値に影響を与えています.他には何もありません.「this値は関数の定義によって異なります.大域関数であれば、thisは大域的なオブジェクトに設定されます.関数がオブジェクトである場合、thisは常にこのオブジェクトを指します.–これは絶対に正しくないです.」)を選択します.話を続けてみると、通常のグローバル関数であっても、呼び出し方式の異なる形式で起動されます.これらの異なった呼び出し方式は、異なるthis値をもたらします.

function foo() {
  alert(this);
}
 
foo(); // global
 
alert(foo === foo.prototype.constructor); // true
 
//      function         ，this    
 
foo.prototype.constructor(); // foo.prototype

いくつかのオブジェクトとして定義された方法で関数を呼び出すことができますが、thisはこのオブジェクトに設定されません.

var foo = {
  bar: function () {
    alert(this);
    alert(this === foo);
  }
};
 
foo.bar(); // foo, true
 
var exampleFunc = foo.bar;
 
alert(exampleFunc === foo.bar); // true
 
//    ，   function         ，this    
 
exampleFunc(); // global, false

参考住所:JavaScriptシリーズを深く理解する(13):This?Yes、this!Javascriptのthisの使い方