ホームページ > ウェブフロントエンド > jsチュートリアル > JS_javascript スキルの適用、呼び出し、バインドの詳細な分析

JS_javascript スキルの適用、呼び出し、バインドの詳細な分析

WBOY
リリース: 2016-05-16 15:06:32
オリジナル
1616 人が閲覧しました

JavaScript では、Function はオブジェクトです。 Function オブジェクトの this ポインターは、関数の呼び出し方法によって異なります。 apply、call、bind を使用すると、関数オブジェクト内の this のポインタをすべて変更できます。違いについて説明する前に、3 つの類似点をまとめてみましょう。
1. これらはすべて、関数のこのオブジェクトのポイントを変更するために使用されます。
2. 最初のパラメータは、これが指すオブジェクトです。
3. 後続のパラメータを使用してパラメータを渡すことができます。

呼び出しメソッド:

構文: call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定義: オブジェクトのメソッドを呼び出して、現在のオブジェクトを別のオブジェクトに置き換えます。
説明: call メソッドを使用すると、別のオブジェクトの代わりにメソッドを呼び出すことができます。 call メソッドは、関数のオブジェクト コンテキストを初期コンテキストから thisObj で指定された新しいオブジェクトに変更します。
thisObj パラメータが指定されていない場合は、グローバル オブジェクトが thisObj として使用されます。

適用:

構文: apply(thisObj, 配列パラメーター)
定義: オブジェクトのメソッドを適用し、現在のオブジェクトを別のオブジェクトに置き換えます
注: パラメータが配列型でない場合は、TypeError が報告されます。

バインド:

bind と呼ばれるメソッドが EcmaScript5 で拡張されました (IE6、7、および 8 ではサポートされていません)。bind は call と非常によく似ています。たとえば、受け入れられるパラメーターは 2 つの部分に分割され、最初のパラメーターは次のように使用されます。実行 関数コンテキストにおける this のオブジェクト。 2 つの違いがあります:
①bindの戻り値は関数である; ②その後のパラメータの使い方も異なる;

まず例 1 を見てください:

function add(a, b) {
  alert(a + b);
}
function sub(a, b) {
  alert(a - b);
}
ログイン後にコピー
通話の場合、次のように使用できます:

add.call(sub,3,1);結果は 4

適用するには、次のように使用できます。

add.apply(sub,[3,1]);結果は 4

バインドの場合、次のように使用できます:

add.bind(sub)(3,1); 結果は 4
です。

出力結果は同じですが、渡すパラメーターの使用法が異なることがわかります。
例 2 を見てください:

function jone(name,age,work){
  this.name=name;
  this.age=age;
  this.work=work;
  this.say=function(msg){
    alert(msg+",我叫"+this.name+",我今年"+this.age+"岁,我是"+this.work)
  }
}
var jack={
  name:"jack",
  age:'24',
  work:"学生"
}
var pet=new jone();

pet.say.apply(jack,["欢迎您"])
console.log(this.name)
ログイン後にコピー
通話するには、次のものが必要です:
pet.say.call(jack,"ようこそ!")


適用するには、これが必要です:
pet.say.apply(jack,["ようこそ!"])

バインドするには、これが必要です:
pet.say.bind(jack,"ようこそ")()

このとき、console.log(this.name) が出力され、this.name が jack となり、this のコンテキストが変更されていることが分かります。
上記の JS の apply、call、bind の詳細な分析は、エディターによって共有されたすべての内容です。参考にしていただければ幸いです。また、Script Home をサポートしていただければ幸いです。

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