ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript_javascript スキルにおける apply() メソッドと call() メソッドの使用の概要

JavaScript_javascript スキルにおける apply() メソッドと call() メソッドの使用の概要

WBOY
WBOYオリジナル
2016-05-16 17:51:431046ブラウズ

1. 各関数には、apply() と call() という 2 つの非継承メソッドが含まれています。
2. これらは同じ目的を持ち、すべて特定のスコープ内の関数を呼び出します。
3. apply() は 2 つのパラメーターを受け取ります。1 つは関数が実行されるスコープ (this) で、もう 1 つはパラメーター配列です。
call() メソッドの最初のパラメータは apply() メソッドと同じですが、関数に渡されるパラメータはリストされている必要があります。
例 1:

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

window.firstName = "diz ";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" }; ("こんにちは " this.firstName " " this.lastName, " よろしくお願いします!");
}
HelloName.call(window); //huo .call(this); call(myObject );


実行結果は次のようになります:
こんにちは、ディズソングです、よろしくお願いします!
こんにちは、私のオブジェクト、よろしくお願いします!




コードをコピーします
コードは次のとおりです。 function sum(num1, num2) { return num1 num2;
}
console.log(sum.call(window, 10, 10)); //20
console.log(sum.apply(window,[10,20])); //30


分析: 例 1 では、従来のメソッドを使用する場合、apply() と call() の実際の使用法は、関数が実行されるスコープを拡張することであることがわかりました。これを実現するには、以下を参照してください。 コード:



コードをコピー
コードは次のとおりです: window.firstName = "diz"; window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" }; console.log("Hello " this.firstName " " this.lastName, " よろしくお願いします!")
}
HelloName(); // こんにちは、diz ソングです。
myObject .HelloName = HelloName;
myObject.HelloName(); //こんにちは、私のオブジェクトです!


のスコープを作成するためにオブジェクト myObject の HelloName() 関数では、myObject の HelloName プロパティを動的に作成する必要があります。このプロパティは、HelloName() 関数へのポインタとして機能します。このようにして、myObject.HelloName() を呼び出すと、内部の this 変数が作成されます。関数は myObject をポイントしており、オブジェクトの他の内部パブリック プロパティを呼び出すことができます。
例 2 を分析すると、call() 関数と apply() 関数の実際の適用例がわかります。実際のプロジェクトでは、実際の状況に応じて柔軟に処理する必要があります。
ちょっとした質問: 関数で関数を定義するときに this 変数をもう一度見てください。



コードをコピーしてください

コード function temp1() { console.log(this); //Object {} function temp2() { console.log(this) ; //Window
}
temp2();
var Obj = {}; //実行結果については、上の緑色のコメントを参照してください。 ! ! !


実行結果は次と同じです。




コードをコピーします

コードは次のとおりです。
関数 temp1() { console.log(this); temp2(); } 関数 temp2() { コンソール。 log(this);
}
var Obj = {};




この方法のブラウジングをサポート デバイスには、IE9、Firefox4、Safari5.1、Opera12、Chrome が含まれます。 ECMAScript5に属するメソッドです。例を直接見てみましょう:




コードをコピー

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


window.color = " red";
var o = { color: "blue" }; function SayColor(){ alert(this.color); var OSayColor =sayColor.bind(o); OSayColor(); //blue
ここで、sayColor() は、bind() メソッドを呼び出し、o オブジェクトを渡し、OSayColor( ) 関数、 OSayColor() では、 this の値は o オブジェクトです。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。