Javascriptの参照型の簡単な紹介_基礎知識

WBOY
リリース: 2016-05-16 17:08:27
オリジナル
1305 人が閲覧しました

はじめに
1. 参照型
参照型は JavaScript の内部型です。これは主に変数や関数を置き換える参照として使用されます。もちろん、実際の値が必要な場合は、それを通じて実際の値を見つけることができます。

2. 参照型の構造
参照型の値は 2 つの部分で構成されます。1 つは参照型の値が参照するオブジェクトです。 2 番目は、base 内のオブジェクトを参照するオブジェクト名です。疑似コードで表すと:

コードをコピー コードは次のとおりです:

var valueOfReferenceType = {
base: <ベース オブジェクト>,
propertyName: <プロパティ名>
};

3. 使用シナリオ
参照型には 2 つの使用シナリオがあります。

(1)識別子を処理する場合

識別子は、グローバル オブジェクト内の変数名、関数名、関数パラメータ名、および認識されないプロパティ名です。

(2) プロパティアクセサーを扱う場合

コードをコピー コードは次のとおりです:

var foo = 10;
function bar( ) {}

操作の中間結果では、参照型は

に対応します。

コードをコピー コードは次のとおりです:

var fooReference = {
Base: global,
propertyName: 'foo'
};

var barReference = {
Base: global,
propertyName: 'bar'
};

JavaScript では、すべてのオブジェクトまたは関数が独自のオブジェクトを持っていることは、実行コンテキスト変数を管理するための変数オブジェクトが各実行コンテキストに存在することを知っています。または機能。

したがって、識別子を扱う場合は次のようになります:

グローバルな文脈では、言うまでもなく、base === globalVO === global

関数の実行コンテキストでは、base === VO/AO

ただし、処理オブジェクトのプロパティは次のとおりです:

これはさらに単純です、base === owerObject

4. 参照型の実数値を取得する
最初に述べたように、参照型は単なる参照ですが、実際の値は格納されません。実際の値が必要な場合は、一連の内部アルゴリズムを通じて取得できます。このアルゴリズムは簡単な擬似コードで記述できます:

コードをコピー コードは次のとおりです。

function GetValue(value) {

if (Type(value) != Reference) {
戻り値;
}

varbase = GetBase(value);

if (base === null) {
throw new ReferenceError;
}

returnbase.[[Get]](GetPropertyName(value));

}

内部 [[Get]] メソッドは、プロトタイプ チェーンで継承されたプロパティの分析を含む、オブジェクトのプロパティの実際の値を返します。したがって、GetValue を使用すると、参照型の実際の値を簡単に取得することもできます。例:

コードをコピーします コードは次のとおりです。

GetValue(fooReference); // 10
GetValue (barReference) // 関数オブジェクト "bar"

それでは、いつ参照型の実際の値を取得する必要があるのでしょうか?

一般に、参照型を割り当てる必要がある場合、操作に参加する必要がある場合、または参照型を呼び出す必要がある場合は、GetValue メソッドを通じて実際の値を取得する必要があります。 (注: GetValue によって取得されたオブジェクトは参照型ではなくなりました)

参照型とこの関係
参照型は主に関数コンテキストのこの点と密接に関連しており、異なる時点でまったく異なるように見えるため、これを関数のパフォーマンスで具体的に説明するために参照型を紹介します。

関数コンテキストでこの値を決定するための一般的な規則は次のとおりです:

関数コンテキストでは、これは呼び出し元によって提供され、関数の呼び出し方法によって決定されます。呼び出し括弧 () の左側が参照型の値である場合、これは参照型値の基本オブジェクトに設定されます。それ以外の場合 (参照型とは異なるその他のプロパティ)、この値は null になります。 。ただし、this の値が null である実際の状況はありません。this の値が null の場合、その値は暗黙的にグローバル オブジェクトに変換されるからです。注: ECMAScript の第 5 版では、グローバル変数への変換は強制されなくなりましたが、値は未定義に割り当てられます。

以下では、呼び出し括弧の左側の違いに基づいて 3 つの状況について説明します。

(1) 呼び出し括弧の左側は参照型の値です

これにはあまり多くの分析は必要ありません。ベース オブジェクトはこの値を見つけるだけです。グローバル変数の下で宣言されている場合は、グローバル オブジェクトを指します。

コードをコピー コードは次のとおりです:

var myObject = {
foo : function() {
console.log(this);
myObject.foo(); //foo のベースが myObject であることは間違いないため、foo メソッドの this は myObject を指します。


(2) 呼び出し括弧の左側は参照型の値ですが、この値は null

コードをコピー コードは次のとおりです。function myFunction() {
var foo = function (){
console.log(this);
}
foo() => null.foo()
}

myFunction(); //出力: ウィンドウ {top: ウィンドウ, window: ウィンドウ...}


内部関数が呼び出される場合、内部関数のベースは現在の実行コンテキストのアクティブ オブジェクト (OA) である必要がありますが、OA が JavaScript 内でベースとして使用される場合は、当然ながら null として扱われます。 JavaScript では、これを null にすることはできません。この場合、base はグローバル オブジェクトに設定されます (これが、前の this 関数呼び出しパターンの設計エラーの原因です)。したがって、この場合、これはグローバル オブジェクトを指します。

(3) 参照型ではない括弧の左側の値を呼び出します

コードをコピー コードは次のとおりです。//簡単な例
(関数( ) {
console.log(this); // null => global
})();

// より複雑な例
var foo = { bar: function () {

console.log(this);
}
};

foo.bar(); // 参照、OK => foo
(foo.bar)(); // 参照、OK => .bar)(); // グローバル

(false || foo.bar)(); // グローバル

(foo.bar, foo.bar)();

呼び出し括弧の左側が参照型ではなく他の型の場合、これは自動的に null に設定され、結果はグローバル オブジェクトになります。

最初の例である即時関数では、関数呼び出しのかっこの左側は参照ではなく式です。

2 番目の例はさらに複雑です。1 つずつ分析してみましょう:

foo.bar()、これについては疑いの余地はありません。base は foo であり、this は foo を指します。

(foo.bar)()、ここでは括弧が使用されています。これはグループ化記号として機能します。つまり、参照型に GetValue メソッドの実行を強制するものではなく、その実行結果は上記とまったく同じです。 。

かっこ内の最後の 3 つは、代入演算、OR 演算、カンマ演算で、参照型に GetValue メソッドを強制的に実行させ、関数オブジェクトを返します。このように、関数呼び出しの括弧の左側は参照型ではなくなるため、これはグローバル オブジェクトを指します。

概要

参照型については、実は、Uncle Tom のブログのこの章を見たばかりで、関数呼び出しモードでの値の原理を説明するために、特別な分析を行いました。そうですね、私は常に参照型と値による参照の間に何らかの関係があるべきだと考えていましたが、予想外にこれはこれを理解するために bolg でのみ使用されます。両者に以前から関係があったのか、関係があったとすればどのような関係だったのかについては、今後も引き続き調査・研究する必要がある。

もっとコミュニケーションが取れるといいですね。アンクル・トムに感謝の意を表したいと思います。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート