この記事では、JavaScript 呼び出しモードとこのキーワード バインディングの関係に関する関連情報を主に紹介します。必要な友人は参照してください。
呼び出し呼び出し
関数を呼び出すと、現在の関数の実行が一時停止され、制御が転送されます。そして新しい関数へのパラメータ。
実際のパラメータと正式なパラメータの間の不一致は実行時エラーにはつながりません。より多くのパラメータは無視され、より少ないものは未定義として埋められます
各メソッドは 2 つの追加パラメータ (this と引数) を受け取ります。 this の値は、呼び出しモード、呼び出しモード (メソッド、関数、コンストラクター、適用呼び出しモード) によって異なります。
これには値が割り当てられ、呼び出された瞬間に発生します。 call メソッドを使用して、さまざまな呼び出しパターンを実装できます
var myObject = { value: 0, increment: function (inc) { this.value += typeof inc === 'number' ? inc : 1; } }; myObject.double = function(){ var helper = function(){ console.log(this);// this point to window } console.log(this);// this point to object myObject helper(); } myObject.double();//myObject Window
1 メソッド呼び出しパターン メソッド呼び出しパターン
メソッド: メソッドが呼び出されるとき、関数はオブジェクトのプロパティとして保存されます。これはオブジェクトにバインドされています
パブリック メソッド: この
myObject.increment(); document.writeln(myObject.value); //
を通して、それらが属するオブジェクトのコンテキストを取得するメソッド 基礎となる実装: myObject.increment。 call(myObject, 0);
myObject.increment。call(myObject,0);
2 The Function Invocation Pattern 函数调用模式
当函数并非对象的属性时就被当作函数调用(有点废话。。),this被绑定到全局对象(window)
ECMAScript5中新增strict mode, 在这种模式中,为了尽早的暴露出问题,方便调试。this被绑定为undefined
var add = function (a,b) { return a + b;}; var sum = add(3,4);// sum的值为7
底层实现:add.call(window,3,4)
2 関数呼び出しパターン 関数呼び出しパターン
関数がオブジェクトの属性ではない場合、関数として呼び出されます (少しナンセンスです...) 、これは Global オブジェクト (ウィンドウ) にバインドされています
strict mode:add.call(undefined,3,4)
add.call(window, 3, 4)
function hello(thing) { console.log(this + " says hello " + thing); } person = { name: "Brendan Eich" } person.hello = hello; person.hello("world") // [object Object] says hello world 等价于 person。hello。call(person,“world”) hello("world") // "[object DOMWindow]world" 等价于 hello。call(window,“world”)
var Quo = function (string) { this.status = string; }; Quo.prototype.get_status = function ( ) { return this.status; }; var myQuo = new Quo("this is new quo"); //new容易漏写,有更优替换 myQuo.get_status( );// this is new quo
3 コンストラクター呼び出しパターン
JavaScript はプロトタイプ継承に基づく言語であり、クラスベース言語用のオブジェクト構築構文のセットも提供します。
this は new
apply(this,arguments[]); call(this,arg1,arg2...); var person = { name: "James Smith", hello: function(thing,thing2) { console.log(this.name + " says hello " + thing + thing2); } } person.hello.call({ name: "Jim Smith" },"world","!"); // output: "Jim Smith says hello world!" var args = ["world","!"]; person.hello.apply({ name: "Jim Smith" },args); // output: "Jim Smith says hello world!"
の最下層で実装されます。これとは対照的に、bind 関数はこれを関数にバインドすることと関数を呼び出すことを分離します。 、関数を特定のコンテキストで使用できるようにするための呼び出し、特にイベントバインドの適用実装
🎜Function.prototype.bind = function(ctx){ var fn = this; //fn是绑定的function return function(){ fn.apply(ctx, arguments); }; }; bind用于事件中 function MyObject(element) { this.elm = element; element.addEventListener('click', this.onClick.bind(this), false); }; //this对象指向的是MyObject的实例 MyObject.prototype.onClick = function(e) { var t=this; //do something with [t]... };
以上がJavaScript 呼び出しモードとこのキーワード バインディングの関係の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。