ホームページ > ウェブフロントエンド > jsチュートリアル > 呼び出しモードはこれにバインドされています

呼び出しモードはこれにバインドされています

php中世界最好的语言
リリース: 2018-06-06 17:41:49
オリジナル
1490 人が閲覧しました

今回は通話モードとこれのバインドについてお届けします。 通話モードとこれをバインドする際の注意点は何ですか? 以下は実際的なケースです。

呼び出し呼び出し

関数を呼び出して、現在の関数の実行を一時停止し、制御とパラメーターを新しい関数に渡します。

実際のパラメータと正式なパラメータの間の不一致は実行時エラーにはつながりません。より多くのパラメータは無視され、より少ないものは未定義として埋められます

各メソッドは 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 オブジェクト (ウィンドウ) にバインドされています

このモードでは、問題をできるだけ早く明らかにし、デバッグを容易にするために、ECMAScript5 の新しいモードです。これは未定義にバインドされています

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!"
ログイン後にコピー
によって返されるオブジェクトを指します

4 適用呼び出しパターン

はどちらも JavaScript の組み込みパラメータであり、前者のパラメータは配列です。後者のパラメータは 1 つずつ渡されます。apply の受け渡しも call

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]... 
};
ログイン後にコピー

の最下位層によって実装されます。これとは対照的に、bind 関数はこれを関数にバインドすることと関数の呼び出しを分離するので、関数は特定のコンテキストで呼び出すことができます。 、特にイベントバインドの適用実装rrreee

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

🎜Excelファイルを操作するNodejs🎜🎜🎜🎜🎜スライドページの下部にデータ要件を無限に読み込む方法🎜🎜🎜

以上が呼び出しモードはこれにバインドされていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート