JavaScript-thisの値を取る6つの状況

たくさんのお盆の友達はjsを勉強する時や他の言語の時にthisで頭が痛くなります.今日はJavaScriptの中のthisについて話します.
関数の中でthisはどの値を取るかは、本当に関数が呼び出されて実行されるときに決定され、関数が定義されているときには決定されません.thisの値はコンテキスト環境の一部を実行するので、関数を呼び出すたびに、新しい実行コンテキスト環境が生成されます.
JavaScriptの中で、thisの取得値は全部で六種類ありますが、具体的にはどの六種類ですか?一緒に見に行きましょう.
状況1:コンストラクタ
構造関数とは、newオブジェクトの関数です.厳密には、すべての関数はnewオブジェクトでもいいですが、いくつかの関数の定義はnewオブジェクトのためであり、関数によっては違います.また、コンストラクタの関数名の最初の文字を大文字にします.例えば、Object、Aray、Functなどです.
 

function A(){
    this.name="Searchin";
    this.year=2018;
    console.log(this);

}
var f1= new A();
console.log(f1.name);//Searchin
console.log(f1.year);//2018

以上のコードの中で、関数がコンストラクターとして使用されると、その中のthisはnewから出てくるオブジェクトを表します.
なお、以上はnew A()の場合のみ、つまりA関数が構造関数として作用する場合である.直接A関数を呼び出すと、new A()ではなく、状況が大きく変わります.

function A(){
    this.name='Searhcin';
    this.year=2018;
    console.log(this);//

}
A();

このような状況の下でthisはwindowです.私たちは後の文で言います.
ケース2:関数をオブジェクトとしての属性
関数がオブジェクトの属性である場合、オブジェクトの属性の一つとして呼び出されると、関数のthisがオブジェクトを指します.
 

var obj={
    x:10,
    fn:function(){
        console.log(this);
        console.log(this.x);

    }
};
obj.fn();

以上のコードでは、fnはオブジェクトの属性としてだけでなく、オブジェクトの属性として呼び出されます.結果としてthisはobjの対象です.
このため、コンソールは、Objと10を出力します.
なお、fn関数がobjの属性として呼び出されない場合、どのような結果になりますか?

var obj={
    x:10,
    fn:function(){
        console.log(this);
        console.log(this.x);

    }
};
var fn1=obj.fn();
fn1();

 
上記のコードのように、fn関数が他の変数に割り当てられている場合、Objの属性として呼び出されていない場合、thisの値はwindowであり、this.xはundefinedである.
ケース3:関数はcallまたはappyで呼び出す
一つの関数がコールされると、thisの値は、入力されたオブジェクトの値をとります.

var obj={
    x:10；
};
    
function fn() {
    console.log(this);
    console.log(this.x);

}
fn.call(obj);

したがって、コンソールは、Objおよび10を出力する.
状況4:グローバル& 一般関数を呼び出します
全体的な環境の下で、thisは永遠にwindowで、これは非難がないべきです.
 

console.log(this===window);//true

普通の関数は呼び出し時に、その中のthisもすべてwindowです.
 

var x=10;
var fn=function(){
    console.log(this);//window
    console.log(this.x);//10

}
fn();

以上のコードはよく分かります.
ただし、次の場合は注意が必要です.

var obj={
    x:10;
    fn:function(){
        function f(){
            console.log(this);//window
            console.log(this.x);//undefined
    
        }
        f();
    }


};
obj.fn();

 
上のコードの中で、関数fはobj.fnの内部で定義されていますが、相変わらず普通の関数です.thisはまだwindowを指しています.
 
五、コンストラクタの原型の中のthis

function fn(){
    this.name = "Searchin";
    this.age = 18;
}

fn.prototype.getName = function (){
    console.log(this.name);
}

var f1 = mew fn();
f1.getName();        //Searchin

上記のようなコードでは、fn.prototype.get Name関数では、th isがf 1オブジェクトを指しています.したがって、f 1.nameの値は、this.nameを介して取得することができる.
実際には、構造関数のプロトタイプだけでなく、プロトタイプ全体においても、thisは現在のオブジェクトの値を表しています.
 
六.矢印関数のthis
ES 6では矢印関数のthisが特別です.
矢印関数式の文法は、関数式よりも短く、独自のthis、argments、superまたはnew.targetを結合しない.矢印関数は、そのコンテキストのthis値を自分のthis値として取得します.
つまり矢印関数は自分のthisではなく、作用ドメインチェーンに沿っています. thisの具体的な指差は普通の関数のthisの方向によって判断すればいいです.
 
はい、以上はthisの出現の6種類の情況で、実は上の情況はすべてひと言で総括を行うことができます:誰の最後の呼び出しの関数、thisは誰を指しますか?
他の状況を発見したり、間違ったところを発見したりしたら、皆さんコメントを歓迎します.一緒に勉強しましょう.
Biu~