ホームページ > 記事 > ウェブフロントエンド > JavaScriptの基本チュートリアルにおける関数呼び出しパターンの例のまとめ
関数は呼び出されたときにのみ実行されます。呼び出し演算子は、関数値を生成する式の後に続く括弧のペアです。括弧には 0 個以上のカンマ区切りの式を含めることができます。各式はパラメータ値を生成し、各パラメータ値には関数の宣言時に定義された正式なパラメータ名が割り当てられます
JavaScriptには関数呼び出しモード、メソッド呼び出しモード、コンストラクタ呼び出しモード、間接呼び出しモードの合計4つの呼び出しモードがあります
【1】関数呼び出しモード
関数がオブジェクトのプロパティではない場合、関数として呼び出されます。通常の関数呼び出しの場合、関数の戻り値は呼び出し側の式の値です
function add(x,y){ return x+y; } var sum = add(3,4); console.log(sum)//7
関数呼び出しモードを使用して関数を呼び出す場合、非厳密モードでは、これはグローバル オブジェクトにバインドされます。は未定義です
function add(x,y){ console.log(this);//window} add();
function add(x,y){ 'use strict'; console.log(this);//undefined } add();//window
したがって、「this」は、現在がstrictモードであるかどうかを判断するために使用できます
var strict = (function(){return !this;}());
書き換え
関数呼び出しモードの関数内のthisはグローバルオブジェクトにバインドされているため、グローバルプロパティが書き換えが発生します
var a = 0; function fn(){ this.a = 1; } fn(); console.log(this,this.a,a);//window 1 1
【2】メソッド呼び出しパターン
関数をオブジェクトのプロパティとして保存したとき、それをメソッドと呼びます。メソッドが呼び出されると、これはオブジェクトにバインドされます。呼び出し式にプロパティを抽出するアクションが含まれている場合、それはメソッドとして呼び出されます
var o = { m: function(){ console.log(1); } }; o.m();//1
メソッドはこれを使用して、それが属するオブジェクトにアクセスできるため、オブジェクトから値を取得したり、オブジェクトを変更したりできます。 this とオブジェクトのバインドは呼び出し時に行われます。これを通じて、オブジェクトが属するオブジェクトのコンテキストを取得できるメソッドは、パブリック メソッドと呼ばれます
var o = { a: 1, m: function(){ return this; }, n: function(){ this.a = 2; } }; console.log(o.m().a);//1 o.n(); console.log(o.m().a);//2
メソッドとして呼び出される関数は、実際には暗黙的な実パラメータを渡します。この実パラメータはオブジェクトであり、その親です。メソッド呼び出しはこのオブジェクトであり、一般的に、そのオブジェクトに基づいたメソッドは複数の操作を実行できます。メソッド呼び出しの構文は、関数がオブジェクトに基づいて動作することを明確に示しています
rect.setSize(width,height); setRectSize(rect,width,height);
上記の 2 行の関数を仮定します。コードはまったく同じで、どちらも仮想オブジェクトの四角形に対して機能します。最初の行のメソッド呼び出し構文は、この関数の実行のキャリアが rect オブジェクトであることを明確に示しています。変数とは異なり、キーワード this にはスコープ制限がありません。 Embedded ネストされた関数は、それを呼び出す関数からこれを継承しません。ネストされた関数がメソッドとして呼び出された場合、その this 値はそれを呼び出したオブジェクトを指します。ネストされた関数が関数として呼び出された場合、その this 値はグローバル オブジェクト (非厳密モード) または未定義 (厳密モード) のいずれかになります
var o = { m: function(){ function n(){ return this; } return n(); } } console.log(o.m());//window
var o = { m: function(){ function n(){ 'use strict'; return this; } return n(); } } console.log(o.m());//undefined
この外部関数の this 値にアクセスしたい場合は、次のものが必要です。 this の値を変数に保存するには、この変数と内部関数の両方が同じスコープ内にあります。通常、これを保存するために変数 self または that が使用されます
var o = { m: function(){ var self = this; console.log(this === o);//true function n(){ console.log(this === o);//false console.log(self === o);//true return self; } return n(); } } console.log(o.m() === o);//true
[3] コンストラクター呼び出しモード
関数またはメソッド呼び出しの前にキーワード new が付いている場合、それはコンストラクター呼び出しになります
function fn(){ this.a = 1; }; var obj = new fn(); console.log(obj.a);//1
コンストラクター呼び出しが括弧内にある場合一連の実パラメータ リストが含まれます。これらの実パラメータ式は最初に計算されてから関数に渡されます。コンストラクタに仮パラメータがない場合、JavaScript コンストラクタ呼び出しの構文では実パラメータ リストと括弧を省略できます。仮パラメータのないコンストラクタ呼び出しは括弧を省略できます
function fn(x){ this.a = x; }; var obj = new fn(2); console.log(obj.a);//2
[注意] コンストラクタはメソッド呼び出しのように見えますが、呼び出しコンテキストとして新しいオブジェクトを使用します。つまり、式 new o.m() では、呼び出しコンテキストは o
var o = new Object();//等价于 var o = new Object;
ではありません。コンストラクターは通常、return キーワードを使用せず、通常は新しいオブジェクトを初期化し、コンストラクターの関数本体の実行が終了すると、明示的に戻ります。 。この場合、コンストラクター呼び出し式は、この新しいオブジェクトの値に評価されます
var o = { m: function(){ return this; } } var obj = new o.m(); console.log(obj,obj === o);//{} false console.log(obj.constructor === o.m);//true
コンストラクターが return ステートメントを使用するが戻り値を指定しない場合、またはプリミティブ値を返す場合、戻り値は無視され、使用しますこの新しいオブジェクトを呼び出し結果として
function fn(){ this.a = 2; }var test = new fn(); console.log(test);//{a:2}
コンストラクターが return ステートメントを明示的に使用してオブジェクトを返す場合、呼び出し式の値はこのオブジェクトになります
function fn(){ this.a = 2; return; } var test = new fn(); console.log(test);//{a:2}
[4] 間接呼び出しモード
JavaScript の関数もオブジェクトです、関数 オブジェクトにはメソッドを含めることもできます。 call() メソッドと apply() メソッドを使用すると、関数を間接的に呼び出すことができます
。どちらのメソッドでも、呼び出しに必要な this 値を明示的に指定できます。つまり、任意の関数を任意のオブジェクトのメソッドとして呼び出すことができます。 、この関数さえもそのオブジェクトのメソッドではありません。どちらのメソッドでも、呼び出しの実際のパラメータを指定できます。 call() メソッドは独自の実パラメータリストを関数の実パラメータとして使用しますが、apply() メソッドはパラメータを配列の形式で渡す必要があります
var obj = {a:1}; function fn(){ this.a = 2; return obj; } var test = new fn(); console.log(test);//{a:1}
以上がJavaScriptの基本チュートリアルにおける関数呼び出しパターンの例のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。