JavaScriptの中のthisキーワードを理解する

JavaScriptにおけるthisキーワードの理解
爬虫類の過程で先端のjsコードに出会いました.thisキーワードについてはよく分かりませんので、このメモを書いてください.
thisの指向は関数定義時には確定できません.関数実行時にのみthisの指向を決定します.
この文は実は一部の妨害性があります.具体的に最後にthisキーワードの理解をまとめています.
demo 01

function printName(){
  var userName = "   ";
  console.log(this.userName);  // undefined
  console.log(this);  // wimdow
}
printName();

説明:func関数を呼び出すと、undefinedおよびwindow自体が現れることが分かります.このprintNameの関数は、実際にはwindowオブジェクトによって作られたものです.

function printName(){
  var userName = "   ";
  console.log(this.userName); // undefined
  console.log(this); // window
}
window.printName();

この関数の呼び出し自体がwindowオブジェクトであることが分かりますので、ここのthisのキーワードはwindowです.第一は定義されておらず、第二はwindow自体である.

userName = "     ";
function printName(){
  var userName = "   ";
  console.log(this.userName); //      
  console.log(this); // window
}
window.printName();

このとき、this.userNameが呼び出したのはwindowの属性値です.
demo 02

var object = {
  userName:"   ",
  printName:function(){
    console.log(this.userName); //    
  }
};
object.printName();

ここでthisのキーワードが指すオブジェクトはobjectであり、呼び出しはobjectである.
demo 03

var object = {
  userName:"   ",
  printName:function(){
    console.log(this.userName); //    
  }
};
window.object.printName();

demo 03とdemo 02のケースは同じです.使用者だけが違っていますが、thisが指すのはobjectの対象です.
説明:
windowはJavaScriptの中の大域の対象で、私達が作成した変数は実はwindowに属性を添加するので、ここでwindowを使うことができます.

var object = {
  numA:10,
  funcB:{
    numA:12,
    printNum:function(){
      console.log(this.numA); // 12
    }
    }
}
object.funcB.printNum();

ここでは、Objectオブジェクトを使って呼び出しますが、なぜ出力されていない値は10ですか?
追加:

もし一つの関数にthisがあるとしても、一級上のオブジェクトに呼び出されない場合、thisはwindow

を指します.

関数にthisがあると、この関数は前のレベルのオブジェクトによって呼び出されます.thisは前のレベルのオブジェクトを指します.

もし一つの関数にthisがあるなら、この関数には複数のオブジェクトが含まれています.この関数は最も外側のオブジェクトによって呼び出されていますが、thisは前のレベルのオブジェクト

だけを指しています.
上の例を見ると、この時のthisはfuncBを指しています.

var object = {
  numA:10,
  funcB:{
    printNum:function(){
      console.log(this.numA); // undefined
    }
    }
}
object.funcB.printNum();

なぜundefinedですか?
オブジェクトfuncBには属性numAがないことがわかりました.このthisはオブジェクトfuncBを指し、undefinedが現れました.
demo 04

var object = {
  numA:10,
  funcB:{
    numA:12,
    printNum:function(){
      console.log(this.numA); // undefined
      console.log(this);// window
    }
    }
}
var o = object.funcB.printNum;
o();

ドーナツがありますか?
注意:転用者は変数です.関数printNumは対象FncBに引用されますが、printNumを変数oに与えた時は実行されませんでしたので、最終的にはwindowを指します.
分析できます.

//        ：
window.o;

ƒ (){
      console.log(this.numA); // 
      console.log(this);//
}

このfが私たちのprintNum関数であることを発見しましたか?
コンストラクタのthisキーワード

function Fn(){
    this.userName = "   ";
}
var User = new Fn;
console.log(User.userName);

このときのthisのキーワードはUserを指します.オブジェクトUserが関数Fnの中のuserNameを注文できるのは、newキーワードでthisの指向を変えることができるからです.このthisをオブジェクトUserに向けて、なぜUserはオブジェクトですか?newキーワードを使ってオブジェクトインスタンスを作成するのです.
thisがreturnに会った時

function Fn(){
  this.userName = "   ";
  return {};
}
var User = new Fn;
console.log(User.userName); // undefined

function Fn(){
  this.userName = "   ";
  return function(){};
}
var User = new Fn;
console.log(User.userName); // undefined

function Fn(){
  this.userName = "   ";
  return 1;
}
var User = new Fn;
console.log(User.userName); //    

説明:戻り値がオブジェクトである場合、thisは戻り値のオブジェクトを指し、戻り値がオブジェクトでない場合、thisは関数の例を指します.
補足説明

の厳格な版の中のデフォルトのthisはもうwindowではなくて、undefinedです.

newオペレータは関数thisの指向性を変えます.上で説明しましたが、この問題について深く議論していません.ネットでもあまり話さないので、ここで話す必要があります.

function fn(){
  this.num = 1;
}
var a = new fn();
console.log(a.num); // 1

なぜthisはaを指すのですか?
newキーワードは空のオブジェクトを作成し、自動的に関数アプリを呼び出します.この空のオブジェクトにthisを向けると、関数内部のthisが空のオブジェクトに置き換えられます.