JavaScript 関数呼び出しのオブジェクトとメソッド_JavaScript スキル

Javascript 関数呼び出しがどのように機能するかを本当に理解していれば、いくつかのバグを回避できます。
まず、以下で使用する単純な関数を作成します。この関数は、this と 2 つの提供されたパラメーターのみを返します。

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

function makeArray(arg1, arg2 ){
return [ this, arg1, arg2 ];
}

この関数の呼び出しは非常に簡単で、必要なのは次のとおりです:

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

makeArray('one', 'two');

Return value: => [ window, 'one', 'two' ]
問題が発生しますが、この値はどのようにして window になったのでしょうか?簡単な分析をしてみましょう:
JavaScript にはグローバル オブジェクトがあり、スクリプト内に散在しているように見えるコードのすべての行は、実際にはグローバル オブジェクトのコンテキストで記述されています。この関数は、ルーズなグローバル関数ではなく、グローバル オブジェクトのメソッドであると言えます。この環境では、そのグローバル オブジェクトが window オブジェクトにマッピングされていることを証明してみましょう。 🎜>

コードをコピーします コードは次のとおりです。 alert( typeof window.makeArray); >

戻り値: => function

これはすべて、以前に makeArray を呼び出したメソッドが、以下で呼び出したメソッド

コードをコピーします

コードは次のとおりです: window.makeArray('one', 'two'); 戻り値: => [ window, 'one', 'two' ]

JavaScript 関数呼び出し規則 1: myFunction() など、明示的な所有者オブジェクトなしで直接呼び出される関数では、これは次のようになります。 result 値はデフォルトのオブジェクト (ブラウザのウィンドウ) になります。

次に、単純なオブジェクトを作成し、そのメソッドの 1 つとして makeArray 関数を使用します。また、このメソッドを呼び出します。

コードをコピー

コードは次のとおりです: var arrayMaker = { someProperty: 'some value here', make : makeArray };

arrayMaker.make('one', 'two');

// Return: => [ arrayMaker, 'one', 'two' ]
arrayMaker[ ' make']('one', 'two');
// Return: => [ arrayMaker, 'one', 'two' ]


この値はオブジェクト arrayMaker 自体は、なぜ元の関数定義が変更されていないのか、なぜそれがウィンドウではないのか疑問に思うかもしれません。関数はオブジェクトであり、関数全体をパラメータ リストと関数と一緒に渡すか、コピーすることができます。 body がコピーされ、arrayMaker の make 属性に割り当てられると、次のように arrayMaker を定義することになります。

コード

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

var arrayMaker = { someProperty: 'some value here', make: function (arg1, arg2) {return [ this, arg1, arg2 ];} };

JavaScript 関数呼び出しルール 2: obj.myFunction() や obj['myFunction']() などのメソッド呼び出し構文を使用する場合、この値はオブジェクトです。

これはイベント処理コードのバグの主な原因です。次の例を見てください:

コードをコピー


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

JavaScript にはクラスが存在せず、カスタム型には初期化関数が必要であることがわかっています。型を定義するにはプロトタイプ オブジェクトを (初期化関数の属性として) 使用します。 、単純な型を作成しましょう

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

function ArrayMaker(arg1, arg2) {

this.someProperty = 'whatever';
this.theArray = [ this, arg1, arg2 ]
//インスタンス化メソッドを宣言します
ArrayMaker.prototype = {
someMethod: function () {
alert( 'someMethod が呼び出された');
},
getArray: function () {
return this.theArray

};
var am = new ArrayMaker( 'one', 'two' );
var other = new ArrayMaker( 'first', 'first' ); ;
// 戻り値: => [ am, 'one' , 'two' ]


関数呼び出しの前に new 演算子が表示されていることは注目に値します。 、関数はグローバル関数のようなもので、作成するプロパティはグローバル オブジェクト (ウィンドウ) 上に作成されますが、コンストラクターに戻り値がないため、使用し忘れた場合はそれが望ましくないということです。 new 演算子を使用すると、一部の変数が未定義に割り当てられるため、コンストラクター関数を大文字で始めることをお勧めします。これは、前の関数を忘れないように注意するために使用できます。

JavaScript 関数呼び出しルール 3: MyFunction() などの関数を初期化関数として使用すると、JavaScript ランタイムは新しく作成されたオブジェクトに this の値を割り当てます。