js文脈まとめ

01 context
どんな方法でも、誰かがそれを呼び出すと、それはcontextです.
これはthisの記述と一致している.
thisは最終的に対象を呼び出します.
文脈はthisの方向です.
02不安定なcontext
contextはjsの表現でよく「不安定」に見えますが、以下に「不安定」が挙げられます.
(1)newと非new
次はよくある面接問題です.①と②はそれぞれ何を出力しますか?

function say() {
  console.log(this);
};

new say(); // ①
say(); // ②

簡単ですが、contextに対する一番の理解です.①say出力の例②window出力ですか?このコードでは②の判断ができないのは明らかです.say()の運行環境は何ですか?
(2)メソッドの割り当て
次の問題では、方法を変数に割り当てます.

var name = "   ";
var cat = {
  name: " ",
  say: function() {
    console.log(this.name);
  }
}
var say = cat.say;
cat.say(); // ①
say(); // ②

結果:①出力にゃ②ワーワーを出力する
sayは実は関数を引用しただけなので、関数の運行はcontextに依存しています.違いのcontextは必ず違った結果があります.
(3)Event Loop
Event Loopはイベントサイクルと呼ばれています.jsにマルチスレッドがないため、複数のタスクを処理する際には、非同期キュー(タイマー、I/O、Promseなど)を採用したり、ブラウザのマルチスレッドを使って複数のタスク(ajaxなど)を起動したりする必要があります.
では、非同期のタスクは、ブラウザの現在開いているウィンドウ、すなわちwindowです.
次はよくある面接問題です.

function say() {
  setTimeout(function() {
    console.log(this);
  }, 0);
};
new say(); //①
say(); //②

①と②はwindowを出力します.
(4)自己実行関数
次の問題を見てください.

function say() {
  (function() {
    console.log(this);
  })();
};
new say(); //①
say(); //②

①と②はwindowを出力します.ここでは、実行関数がwindowに呼び出されていることも説明しています.
03閉じて世界を救う
不安定なcontextに直面して、クローズドは受動的にこれらの問題を解決することができます.私たちが望むcontextは、クローズドが示すscopeに驚くほど似ているからです.
そこで私たちは次から次へとこうした.

function say() {
  var _this = this;
  setTimeout(function() {
    console.log(_this);
  }, 0);
};
new say(); //①
say(); //②

function say() {
  (function(_this) {
    console.log(_this);
  })(this);
};
new say(); //①
say(); //②

上の製法を使いますthisの代わりに、外部層に正常にアクセスするようにします.
04 bitで最適化
クローズドでcontextを変える問題に対しては、あまり優雅ではありません.ビッドを使うともっと簡潔になります.
実装は以下のコードです.

function say() {
  setTimeout(function() {
    console.log(this);
  }.bind(this), 0);
};
new say(); //①
say(); //②

bindを通して直接に現在の関数のcontextを変えます.このようなやり方は私達の読書習慣に合っています.
05 callとappy
callとappyはまた対象になりすまして、方法の実行の時で、1つの対象に入ってきて、元のcontextに代わります.
下記のコードはコールにより、アクティブに変更された実行関数のcontextです.これはパッケージの中で重要です.

<div onclick="clickdiv.call(this)">click mediv>
<script type="text/javascript">
function clickdiv() {
  console.log(this);
}
script>

divをクリックして、div元素を印刷します.
06矢印関数
contextという問題を意識するかもしれないので、s 6は矢印関数を出します.矢印関数は語法の作用領域を採用しています.これにより、閉じられた解と極めて似ています.
注意:argments自体は矢印関数の下で、外層関数のargmentsを指します.

function say() {
  setTimeout(() => {
    console.log(this);
  }, 0);
};
new say(); //①
say(); //②

ここ①と②は正常に出力されました.
07 Agments
Agmentsもcontextでは回りきれないカンであり、Agmentsは関数の内部オブジェクトであり、jsは関数を実行する時、Agmentsによって関数内部の変数を初期化します.
argments.calleeは現在の関数にアクセスできます.argments.calee.calerは、現在の関数を呼び出す関数にアクセスできます.
アーグメンント上の特性が厳しいモードでは使用できません.