JavaScriptの関数呼び出し4つのメソッドを詳しく解説_JavaScriptスキル

JavaScript では、関数は JavaScript のデータ型であり、C# や他の記述言語のようにモジュールとして使用されるだけではありません。関数の呼び出しには、関数呼び出し形式、メソッド呼び出し形式、コンストラクター形式、および適用形式の 4 つの呼び出しモードがあります。ここでのすべての呼び出しモードの中で、主な違いはキーワード this の意味にあります。これらの呼び出し形式を以下に紹介します。

この記事の主な内容:

1. 関数の 4 つの呼び出し形式を分析する
2. 関数内での意味を明確にする
3. 関数を呼び出すためのコンテキストの使用方法を学習する
🎜>

1. 関数呼び出しフォーム

関数呼び出し形式は、最も一般的な形式であり、最もよく理解されている形式です。いわゆる関数形式とは、通常、関数を宣言して直接呼び出すことを意味します。例:

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

// 関数を宣言し、 call
function func() {
alert("Hello World");
}
func();

または:

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

// 関数のラムダ式を使用して関数を定義し、
var を呼び出します。 func = function() {
alert("Hello,p​​rogrammer");
};
func();

これら 2 つのコードにより、ブラウザにダイアログ ボックスが表示されます。文字列内のテキストを表示します。これは関数呼び出しです。
関数呼び出しは、通常学習していることと同じように、非常に簡単であることがわかります。ここで重要なのは、関数呼び出しモードでは、関数内の this キーワードがグローバル オブジェクト (つまり、ウィンドウ オブジェクト) を参照していることです。ブラウザ。例:

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

var func = function() {
alert(this);
};
func();

このとき、ダイアログボックスがポップアップ表示され、[オブジェクトウィンドウ]が表示されます。

2. メソッド呼び出しモード

関数呼び出しモードは非常にシンプルで、最も基本的な呼び出し方法です。ただし、同じ関数ですが、オブジェクトのメンバーに割り当てた後の動作は異なります。関数をオブジェクトのメンバーに割り当てると、その関数は関数と呼ばれなくなり、メソッドと呼ばれるようになります。例:

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

// 関数を定義します
var func = function() {
alert("Am I a function?");
};
// オブジェクトに割り当てます
var o = {};
o. fn = func; // ここに括弧を追加しないように注意してください
//
o.fn(); この時点では、o.fn は関数ではありません。 。実際、fn のメソッド本体は func のメソッド本体とまったく同じですが、ここに微妙な違いがあります。以下のコードを見てください:

コードをコピーします コードは次のとおりです://上記のコードを続けます

alert(o.fn === func);

出力された結果は true で、これは 2 つの関数が同じものであることを示しますが、関数のコードを変更します。

//関数本体を変更します
var func = function() {alert(this);

};
var o = {};
o.fn = func;
//
alert(o.fn === func) を比較します。
//
func() を呼び出します。
o.fn();

ここを実行します結果として、両方の関数は同一であるため、出力される結果は true になります。ただし、2 つの関数の呼び出しは異なるため、func の呼び出しでは [object Window] が出力されますが、o.fn の出力結果は [object Object] となります。

関数呼び出しとメソッド呼び出しの違いは次のとおりです。関数呼び出しでは、これは特にグローバル オブジェクト ウィンドウを指しますが、メソッドでは、これは具体的に現在のオブジェクトを指します。つまり、o.fn の this はオブジェクトを指します。ああ。

3. コンストラクター呼び出しモード

これは関数でもあり、純粋関数モードではウィンドウを指しますが、オブジェクト メソッド モードでは現在のオブジェクトを指します。これら 2 つのケースに加えて、JavaScript の関数もコンストラクターになる可能性があります。関数をコンストラクターとして使用する構文では、関数呼び出しの前に new キーワードを置きます。たとえば、コード:

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

// コンストラクターを定義します
var person = function() {
this.name = "プログラマー";
this.sayHello = function() {
alert( "Hello 、これは" this.name);
};
};
// コンストラクターを呼び出してオブジェクトを作成します
var p = new Person();
// オブジェクトを使用します
p.sayHello();

上記のケースでは、まずコンストラクター person を作成し、次にそのコンストラクターを使用してオブジェクト p を作成します。ここでは新しい構文が使用されています。次に、そのオブジェクトを使用して、sayHello() メソッドを呼び出します。このケースでは、コンストラクターを使用してオブジェクトを作成します。ケースからわかるように、これはオブジェクト自体を指します。上記の単純な使用に加えて、コンストラクターとしての関数にいくつかの変更があります。つまり、

1. オブジェクトで使用する必要があるすべての属性は、

によってガイドされる必要があります。

2. 関数の return 文の意味が書き換えられ、オブジェクト以外が返された場合はこれが返されます。

コンストラクター内の

this

これの意味を知るには、オブジェクトの作成プロセスを分析する必要があります。たとえば、次のコード:

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

var Person = function() {
This.name = "Programmer";
};
var p = new Person();

ここで関数 Person を最初に定義します。実行全体:

1. プログラムがこの文を実行するとき、関数本体は実行されないため、JavaScript インタプリタはこの関数の内容を知りません。

2. 次に、new キーワードを実行してオブジェクトを作成します。インタプリタはメモリを割り当て、オブジェクトへの参照を取得し、新しいオブジェクトへの参照を関数に渡します。

3. 次に関数を実行し、渡されたオブジェクト参照を this に渡します。つまり、コンストラクターでは、これは new によって作成されたばかりのオブジェクトです。

4. 次に、これにメンバーを追加します。つまり、オブジェクトにメンバーを追加します。

5. 最後に関数は終了し、これを返し、左側の変数に渡します。

コンストラクターの実行を分析した後、コンストラクター内の this が現在のオブジェクトであることがわかります。

コンストラクターの

return

コンストラクター内の return の意味が変更されました。まず、コンストラクター内でオブジェクトが返された場合、元の意味が保持されます。数値、ブール値、文字列などの非オブジェクトが返される場合、return ステートメントがない場合は、これも返されます。次のコードを参照してください:

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

// オブジェクトを返します return
var ctr = function() {
this .name = "趙暁虎";
return {
name:"牛梁梁"
};
};
//オブジェクトを作成
var p = new ctr();
//アクセス名属性
alert(p.name);

コードを実行すると、ここに出力される結果は「Niu Liangliang」です。コンストラクターはオブジェクトを返すため、return の意味は保持され、返される内容は return 後のオブジェクトです。次のコードを見てください:

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

// 非オブジェクト データを返すコンストラクターを定義します
var ctr = function() {
This.name = " Zhao Xiaohu";
Return "Niu Liangliang";
};
// オブジェクトを作成
var p = new ctr();
//
alert(p) を使用します。
alert(p. name);

コードを実行した結果、ポップアップ ウィンドウは最初に [object Object] を出力し、次に "Zhao Xiaohu" を出力します。これは、ここでの戻り値が a であるためです。基本タイプに属する string の場合、ここの return ステートメントは無効であり、このオブジェクトが返されるため、最初のステートメントは [object Object] を出力し、2 番目のステートメントは unknown を出力しません。

4. 通話モードを適用します

上記の 3 つの呼び出しモードに加えて、オブジェクトとしての関数には、使用できる適用メソッドと呼び出しメソッドもあります。これが 4 番目の呼び出しモードであり、私はこれを適用モードと呼んでいます。

まずapplyモードを紹介します まずapplyモードは関数やメソッドのように使うことができる柔軟な使い方と言えます。まず、構文を見てみましょう: 関数名.apply(オブジェクト, パラメータ配列);

ここでの構文はかなりわかりにくいので、例を使って説明しましょう:

1. 2 つの新しい js ファイル、つまり「js1.js」と「js2.js」を作成します。

2. コードを追加します

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

// js1.js ファイル内
var func1 = function() {
this.name = "Programmer";
};
func1.apply(null); 🎜>アラート(名前);
// js2.js ファイル

var func2 = function() {
this.name = "プログラマ";
};
var o = {};
func2. (o);
alert(o.name);

3. 2 つのコードをそれぞれ実行すると、最初のファイルの name 属性がグローバル オブジェクト ウィンドウにロードされ、2 番目のファイルの name 属性が受信オブジェクトにあることがわかります。 、1 つは関数呼び出しに相当し、2 つ目はメソッド呼び出しに相当します。

ここでのパラメータはメソッド自体のパラメータですが、たとえば、次のコードのように格納する必要があります。 code

コードは次のとおりです: // 配列の例var arr1 = [1,2,3,[4,5] ,[6,7,8]];// 展開しますvar arr2 = arr1.conact.apply([], arr1);

次に、通話モードを紹介します。通話モードの最大の違いです。適用モードは、呼び出し内のパラメータが配列を使用しないことを意味します。次のコードを参照してください。

// メソッドを定義します
var func = function(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;};

//オブジェクトを作成します
var o = {};
//オブジェクトにメンバーを追加します
//パターンを適用します
var p1 = func.apply(o, ["趙暁胡", 19, "男性"]);
// 通話モード
var p2 = func.call(o, "趙暁胡", 19, "男性");


上記のコードでは、適用モードと呼び出しモードの結果は同じです。

実際、apply モードと call モードを使用すると、この意味を任意に制御でき、関数 js のデザイン モードで広く使用されています。簡単にまとめると、js には関数呼び出しの 4 つのモードがあります。つまり、function、method、constructor、apply です。これらのモードでの this の意味は、関数では、これはグローバル オブジェクト ウィンドウであり、メソッドでは、これです。コンストラクタでは現在のオブジェクトを参照し、適用モードでは任意に指定できます。適用パターンで null が使用されている場合は関数パターン、オブジェクトが使用されている場合はメソッド パターンです。

5. 包括的な例

この記事を事例で終わりにしましょう。ケースの説明: ID が dv の div があり、その上にマウスを移動すると、高さが 2 倍に増加します。マウスを離れると、その高さが以下に直接ロードされます。 🎜>

コードをコピー

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

var dv = document.getElementById("dv");
var height = parseInt(dv.style.height || dv.offsetHeight);
var intervalId;
dv.onmouseover = function() {
// 実行中のアニメーションを停止
clearInterval(intervalId);
// 目標の高さを取得
var toHeight = height * 2;
// 取得現在のオブジェクト
var that = this;
// タイマーを開始し、ゆっくりと変更します
intervalId = setInterval(function() {
// 現在の高さを取得します
var height = parseInt( dv.style.height || dv.offsetHeight);
それぞれ変更する必要があるステップ サイズを記録します。時間ステップ サイズが 0
if( h > 0 ) {
) "px";
} else {
// 原理は前と同じ
clearInterval(intervalId);
var toHeight = height;
var that = this;
intervalId = setInterval(function() {
var height = parseInt(dv .style.height || dv.offsetHeight);
var h = Math.ceil(Math.abs(height - toHeight) / 10);
if( h > 0 ) {
that.style .height = (height - h) "px";
} else {
🎜>