JavaScript 関数呼び出し rules_javascript スキル

JavaScript 関数呼び出しルール 1

(1) グローバル関数呼び出し:
function makeArray( arg1, arg2 ){
return [this , arg1 , arg2 ];
これは関数を定義するために最も一般的に使用される方法です。 JavaScript を学習している人はその使い方に精通していると思います。
呼び出しコードは次のとおりです:
makeArray('one', 'two');
// => [ window, 'one', 'two' ]

この方法グローバル関数呼び出しであると言えます。
なぜグローバル関数と言われるのですか?
これはグローバル オブジェクト ウィンドウのメソッドであるため、
次のメソッドで確認できます:
alert( typeof window.methodThatDoesntExist );
// => unknown

alert( typeof window.makeArray);
// => function

したがって、makeArray を呼び出すために使用したメソッドは、以下で呼び出されるメソッドと同じです
window.makeArray('one', 'two') ;
// => [ window, 'one', 'two' ]


JavaScript 関数呼び出しルール 2
(1) オブジェクトメソッド呼び出し:
// オブジェクトの作成
var arrayMaker = {
someProperty: 'some value here',
make: makeArray
}; 'one', 'two'); // => [ arrayMaker, 'one', 'two' ]
//または次のメソッドを使用して呼び出します:
arrayMaker['make']('one' , 'two') ; // => [ arrayMaker, 'one', 'two' ]

これと先ほどの違いを見てください、この値はオブジェクトそのものになります。質問: 元の関数定義は変更されていないのに、これが変更されたのはなぜですか?

素晴らしいですね、疑うのは当然です。これには、JavaScript で関数を渡す方法が関係します。
関数は JavaScript の標準データ型です。
それはオブジェクト全体を渡すことも、コピーすることもできます。 function パラメータリストと関数本体の両方がコピーされ、
が arrayMaker のプロパティ make に割り当てられます。これは、次のように arrayMaker を定義するのと似ています。
var arrayMaker = {
someProperty: 'some value here ',
make: function (arg1, arg2) {
return [ this, arg1, arg2 ]
}
}; 2 番目の呼び出しがわからない場合イベント処理コードでは、さまざまなバグがよく発生します。例:








function buttonClicked( ){ var text = (this === window) : this.id;
alert( text ); var button1 = document.getElementById('btn1 ') ;
var button2 = document.getElementById('btn2');
button1.onclick = buttonClicked;
buttonClicked(); ;


最初のボタンをクリックすると、「btn1」が表示されます。これはメソッド呼び出しであり、これが属するオブジェクト (ボタン要素) であるためです。
2 番目のボタンをクリックすると、buttonClicked が直接呼び出されるため、「ウィンドウ」が表示されます (obj.buttonClicked() とは異なります)。
このボタンと 3 番目のボタンでは、イベント ハンドラーがラベルに直接配置されます。したがって、3 番目のボタンをクリックした結果は 2 番目のボタンと同じになります。

注意してください:
button1.onclick = buttonClicked;
button2.onclick = function(){
buttonClicked()
};差別化された。

JavaScript 関数呼び出しルール 3


もちろん、jQuery ライブラリを使用している場合は、それほど考える必要はありません。この値には、現在のイベント ソース要素への参照が含まれていることを確認します。
// jQuery を使用します
$('#btn1').click( function() {
alert( this.id ); // jQuery は 'this' がボタンになることを保証します
}) ;

では、jQuery はどのようにしてこの値をオーバーロードするのでしょうか?
答えは、call() と apply() です。関数が頻繁に使用されると、必要な情報が同じコンテキスト内にないことがわかり、コミュニケーションが非常に困難になります。

JavaScript では、関数もオブジェクトです。関数オブジェクトにはいくつかの事前定義メソッドが含まれており、そのうちの 2 つは、このメソッドのコンテキストをリセットするために使用できます。






function buttonClicked(){
var text = (this === window ) ? 'window' : this.id;
alert( text );
}
var button1 = document.getElementById('btn1');
var button2 = document.getElementById('btn2' );

button1.onclick = buttonClicked;
button2.onclick = function(){
buttonClicked.call(this); // btn2
};


JavaScript function calling rule four

(1) Constructor
I don’t want to delve into the definition of types in Javascript, but at this moment we need to know that there are no classes in Javascript,
And any custom type requires an initialization function. It’s also a good idea to define your type using a prototype object (as an attribute of the initialization function).
Let’s create a simple type
//Declaration A constructor
function ArrayMaker(arg1, arg2) {
this.someProperty = 'whatever';
this.theArray = [ this, arg1, arg2 ];
}
// Statement Instantiation method
ArrayMaker.prototype = {
someMethod: function () {
alert( 'someMethod called');
},
getArray: function () {
return this .theArray;
}
};

var am = new ArrayMaker( 'one', 'two' );
var other = new ArrayMaker( 'first', 'second' ) ;

am.getArray();
// => [ am, 'one' , 'two' ]
other.getArray();
// => [ other, 'first', 'second' ]

A very important and noteworthy thing is the new operator that appears before the function call. Without that, your function is just like a global function, and the properties we created All will be created on the global object (window), and you don't want that.
Another point, because there is no return value in your constructor, if you forget to use the new operator, some of your variables will be assigned undefined.

So it is a good habit to start the constructor function with a capital letter. This can be used as a reminder not to forget the previous new operator when calling.
In this way, the code in the initialization function is as follows Initialization functions you write in other languages ​​are similar. The value of this will be the object you will create