ホームページ > ウェブフロントエンド > jsチュートリアル > 試し方: call および apply_javascript テクニック

試し方: call および apply_javascript テクニック

WBOY
リリース: 2016-05-16 16:49:04
オリジナル
1192 人が閲覧しました

ECMAScript v3 では、これら 2 つのメソッドが Function プロトタイプに定義されています。これら 2 つのメソッドの機能は同じです。これらの 2 つのメソッドを使用すると、他のオブジェクト メソッドを呼び出すのと同じように関数を呼び出すことができます。この文は書籍 I からのものです。上にコピーしましたが、少なくとも私はそれが何を意味するのか理解できませんでした。
以下はシンプルで理解しやすいので、最初にコードを見てみましょう:

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

function Introduction(name,age)
{
Document.write("私の名前は " name " です。私は " 年齢です)
}
var p=new People()
紹介.call(p,"Windking"); ,20) ;

上記のコードについて話します。call を使用すると、Introducing が p のメソッドになります。 call メソッドを使用すると、上記のコードは次のコードと同等になります:

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

function People(name,age)
{
this.name=name;
this.age=function(){
document.write("私の名前は " name " です。 );
}
}

意味わかりますか?適用しても同じ効果があります。

この方法が実際にどのように使用できるかは別として、まず文法について話しましょう。
call は少なくとも 1 つのパラメータを受け入れます。たとえば、上記の例では、 Introduction メソッドはオブジェクト p によって呼び出されることを期待しており、最初のパラメータとして p を使用します。呼び出しパラメータの。残りのパラメータの数は任意であり、Introducing メソッドのパラメータとして機能します。順序は、導入パラメータが宣言された順序になります。たとえば、 Recommend.call(p,"Windking",20) の場合、 Introduction が p のインスタンス メソッドである場合、次のようになります: p. Introduction("Windking",20)。わかりますか?渡されるパラメータの順序は、関数内でパラメータが宣言された順序と一致している必要があることに注意してください。
call を理解すると、apply メソッドは理解しやすくなります。apply と call の唯一の違いは、call は少なくとも 1 つのパラメータを受け入れるのに対し、apply は最初のパラメータは call と同じであり、2 番目のパラメータだけを受け入れるということです。パラメーターは、添字のコレクションを持つパラメーターです。たとえば、紹介.call(p,"Windking",20) は、紹介.apply(p,["Windking",20]) として書き換えることができます。今回は分かりましたか?
では、これら 2 つの方法はどのような用途に使われるのでしょうか?上記の機能だけを実装したいのであれば、Peopleのメソッドとして紹介を実装すれば良いのではないでしょうか?

アプリケーションを 2 つの項目にまとめます:

1. 共有方法。まずコードを見てみましょう:

コードをコピーします コードは次のとおりです:
function Introduction(name,age)
{
document.write("私の名前は " name " です。私は " 年齢です。>}


これは自己紹介メソッドです。ここでは、男の子のクラスと女の子のクラスがあるとします (ここではデモンストレーションのためにここにいます。実際には、People の親クラスを使用します)。なぜなら、それらの紹介はすべて同じだからです。 , そのため、この方法を共有できます。

function Boy()
{
this .BoyRecruit=function(){
Introduction.call(this,name,age)
}


;
同様に、Girl でも同じです。この場合、コードを書く必要はありません。実際、これは少し突飛です。
のように書くこともできるからです。

コードをコピー コードは次のとおりです。function Boy()
{
this .BoyRecruit=function(){
紹介(名前,年齢)
}
}



しかし、現時点では、Apply を使用すると、はるかに単純に見えます。

コードをコピー コードは次のとおりです。function Boy()
{
this .BoyRecruit=function(){
Introduction.apply(this,arguments)
}

;

もっと簡単ではないでしょうか?パラメーターが多数ある場合は、そのような密集した一連のパラメーターを記述する必要はありません。

2. クロスドメイン呼び出し

簡単な例を見てみましょう (デモンストレーションのみのため、価値はありません):

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

function Boy(name,age)
{
this.Boy Introduction=function(){
document.write("私の名前は " name " です。私は " 年齢です
}
}
function Girl(name,年齢)
{

}

これは Boy と Girl のクラスであり、次のコードを書きます:

var b=new Boy("Windking",20);
b.BoyIntroducer();

これには異論はありません。ある日、女の子が自己紹介をしたいと思っていて、たまに使うだけだとします。その場合、他の女の子は内気で自己紹介をしたがらないので、Girl クラスを変更する必要はありません。そうすると、この時間にこれを行うことができます。

var g=new Girl("Xuan",22);

紹介.call(g,"Xuan",22);

3. 実際の使用 - 継承

上記はすべて簡単で洗練されていません。次に示すのは、構造継承に使用される、最も広く使用されている call と apply のアプリケーションです。

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