JavaScript 関数のスコープとこのポインターの詳細な紹介

以下のエディターは、js 関数のスコープとこのポインターについての深い理解をもたらします。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。エディターをフォローして見てみましょう

関数のスコープとこのポインターは js の非常に重要な部分です。これにロジックが必要であることを明確にするために、私のロジックがどのようなものかを見てみましょう...

以下はです。アウトラインでは、興味のある項目を直接選択して読むことができます。

• 関数定義方法: 直接定義(ウィンドウ下、内部定義)、オブジェクトメソッド、オブジェクトプロトタイプメソッド

• 関数呼び出し方法: 直接呼び出し、call/apply、with

• 直接の場合 定義された範囲関数とオブジェクト メソッドは、デフォルトでは、それが定義されている場所のスコープ チェーンになります。

• 直接定義された関数の場合、これはウィンドウを指します。

• オブジェクトメソッドの場合、これはインスタンス化されたオブジェクトを指します（インスタンス化されたオブジェクトがデフォルトでこれを返す場合に対応します）。

• call/apply を使用して、メソッドの this ポインターを変更します

• 関数またはメソッドを定義するとき、with を使用してそのスコープ チェーンを変更できます。

以下で詳しく説明しましょう:

概要で述べたように、関数の定義は 2 つのタイプに分けることができます: 直接定義 (ウィンドウ下、内部定義)、オブジェクト メソッド (またはオブジェクト プロトタイプ)方法） ）。以下のサンプル コードから、関数 fn1 および fn2 とオブジェクトのメソッド doFunction が使用されていることがわかります。関数が name を使用する場合、name の値は対応するフィールドから取得されます。

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1() {
  resultCon.innerHTML += name;
}

function MyObj() {
  var name = &#39;MyObj下的name<br/>&#39;;
  this.doFunction = function() {
    resultCon.innerHTML += name;

name の値を使用するときに "name" を "this.name" に置き換えるとどうなりますか? 次の例を参照してください:

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1() {
  resultCon.innerHTML += this.name;
}

function MyObj() {
  var name = &#39;MyObj下的name<br/>&#39;;
  this.doFunction = function() {
    resultCon.innerHTML += this.name;

結果の項目から概要を確認できます4 と 5 を見ると、this とscope が 2 つの別個のチェーン セットであり、それぞれ独自の変数クエリ ロジックに従っていることもわかります。初心者の場合は、以下のパフォーマンス分析で説明されています。まずは「jsスコープチェーン」の基礎知識からお話しましょう。

関数の呼び出し方法に関して、概要の項目 2 と 6 を説明するために次の例を使用します。

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1() {
  resultCon.innerHTML += this.name;
}

function MyObj() {
  var name = &#39;MyObj下的name<br/>&#39;;
  this.doFunction = function() {
    resultCon.innerHTML += this.name;

呼び出し時に call と apply を使用するのは、呼び出される関数の this ポインターを変更することです。 with を使用すると、呼び出された関数内の変数のクエリ ドメインを変更できます。上記の例では、呼び出しと名前の前にこれを削除し、with の機能を示すために with を追加します。

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1(myScope) {
  with (myScope) {
    resultCon.innerHTML += name;
  }
}

function MyObj(myScope) {
  var name = &#39;MyObj下的name<br/>&#39;;

with の使い方が不便なので、呼び出される関数に with を追加する必要があるのを見て、呼び出される関数を変更せずに変数のスコープ全体を変更するには次のように呼び出すことができるのではないかと疑問に思う人もいるかもしれません。 ?

ごめんなさい、いいえ！したがって、一部の成熟したフレームワークでは call と apply を使用できますが、JSHint を使用して js 構文を検出する場合、with は小さな赤い点でマークされており、これを使用することも推奨されています。 with は変数のデフォルトのクエリ チェーンを変更するため、後続のメンテナに混乱を引き起こす可能性があり、パフォーマンスに関する考慮事項がいくつかあるため、with は注意して使用してください。

以上がJavaScript 関数のスコープとこのポインターの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。