jsでのapplyとcallの簡単な使い方

小云云
リリース: 2017-12-09 13:29:00
オリジナル
1390 人が閲覧しました

call と apply はこれを動的に変更するように見えますが、あるオブジェクトに特定のメソッドがない場合、他のオブジェクトのメソッドを使用して操作するために call または apply を使用できます。この記事では、皆さんのお役に立てればと思い、js での apply と call の簡単な使い方を中心に紹介します。

call と apply は、JavaScript エンジンによって内部的に実装される Function.prototype のメソッドであり、Function.prototype に属するため、各 Function オブジェクトのインスタンス、つまり各メソッドはメソッドであるため、call 属性と apply 属性を持ちます。これら 2 つのメソッドは同じ機能を持ちますが、異なる方法で使用されるため、混同しやすいです。上記のことから、
call、apply であると結論付けることができます。メソッドを呼び出す this ポインターを変更するために、methods に使用されます

簡単な例:

call

function A() {
  this.getName = function (xx) {
    return xx;
  }
}

function B() {

}

var a = new A();
console.log( a.getName('i am A') ); //i am A

var b = new B() ;
console.log( a.getName.call(b,'i am B') ); // i am B
ログイン後にコピー

B 関数にはメソッドがありません。A 関数には getName() メソッドがあります。 、a.getName() は当然確立されますが、B も getName() メソッドを使用する必要がある場合はどうなるでしょうか。 次に、 call(this,'parameter') を使用します。 !

この文を再度理解すると、call または apply を使用して他のオブジェクトのメソッドを呼び出して操作することができます。call と apply は、本来は a.getName() の this を指しており、this を動的に指します。 to b そして b.getName() になります

apply

apply と call はパラメータの使い方が違うだけです

function A() {
  this.sun = function (a ,b) {
    return a+b;
  }
}

function B() {

}

var a = new A();
console.log( a.sun(1,2) ); //3

var b = new B() ;
console.log( a.sun.call(b,2,2) ); // 4

console.log( a.sun.apply(b,[3, 3]) ); //6
ログイン後にコピー

call と apply の一般的な使い方

ほとんどの場合、 document.getElementsByTagName によって選択された dom ノードは配列のような配列です。プッシュ、ポップ、その他のメソッドを配列の下に適用することはできません。

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));
ログイン後にコピー

を渡すことで、domNodes が Array の下のすべてのメソッドを適用できるようになります。

関連する推奨事項:


call と apply を使用して JavaScript で継承を実装する方法の詳細な説明

JavaScript で call、apply、bind は何をするのですか?なぜそれらを使用するのでしょうか?

JavaScriptのapplyとcallの違いを詳しく解説

以上がjsでのapplyとcallの簡単な使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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