JSでの関数のapplyとcallの詳細説明-jsチュートリアル-php.cn

JSでの関数のapplyとcallの詳細説明

一个新手

リリース： 2017-09-26 09:36:09

オリジナル

1676 人が閲覧しました

apply と call の違い

ECMAScript 仕様では、すべての関数に対して call メソッドと apply メソッドが定義されており、それらは広く使用されており、それらの機能はパラメーターを渡す形式が異なるだけです。

apply( )

apply メソッドは 2 つのパラメーターを渡します。1 つは関数コンテキストとしてのオブジェクトで、もう 1 つは関数パラメーターで構成される配列です。

var obj = {
    name : &#39;linxin&#39;}function func(firstName, lastName){
    console.log(firstName + &#39; &#39; + this.name + &#39; &#39; + lastName);}func.apply(obj, [&#39;A&#39;, &#39;B&#39;]);    // A linxin B

ログイン後にコピー

obj が関数コンテキストとして使用されるオブジェクトであり、関数 func 内の this がオブジェクト obj を指していることがわかります。パラメータ A と B は、それぞれ func パラメータのリスト要素に対応して、配列に配置され、func 関数に渡されます。

call( )

call メソッドの最初のパラメータも関数コンテキストのオブジェクトですが、後で渡されるのは単一の配列ではなくパラメータリストです。

var obj = {
    name: &#39;linxin&#39;}function func(firstName, lastName) {
    console.log(firstName + &#39; &#39; + this.name + &#39; &#39; + lastName);}func.call(obj, &#39;C&#39;, &#39;D&#39;);       // C linxin D

ログイン後にコピー

apply を比較すると、C と D が配列に配置されるのではなく、個別のパラメーターとして func 関数に渡されることがわかります。

実際、いつどの方法を使用するかを心配する必要はありません。パラメータがすでに配列に存在する場合は、当然 apply を使用します。パラメータが分散していて相互に相関がない場合は、call を使用します。

applyとcallの使い方

1.これを

var obj = {
    name: &#39;linxin&#39;}function func() {
    console.log(this.name);}func.call(obj);       // linxin

ログイン後にコピー

を指すように変更します。これで、関数コンテキストとしてObjが渡されるので、callメソッドの最初のパラメータがオブジェクトであることがわかります。 time、関数内の this は obj オブジェクトを指します。ここでの func 関数は実際には

function func() {
    console.log(obj.name);}

ログイン後にコピー

2 と同等です。他のオブジェクトからメソッドを借用する

まず例を見てください

var Person1  = function () {
    this.name = &#39;linxin&#39;;}var Person2 = function () {
    this.getname = function () {
        console.log(this.name);
    }
    Person1.call(this);}var person = new Person2();person.getname();       // linxin

ログイン後にコピー

上記から、person2 によってインスタンス化されたオブジェクト person が getname メソッドを通じて person1 の名前を取得していることがわかります。。 PERSON2 では、PERSON1.call(this) の機能は this オブジェクトの代わりに PERSON1 オブジェクトを使用することであるため、PERSON2 は PERSON1 のすべてのプロパティとメソッドを持ち、これは PERSON2 が PERSON1 のプロパティとメソッドを継承するのと同等です。

3. 関数の呼び出し

apply メソッドと call メソッドは関数をすぐに実行するため、関数の呼び出しにも使用できます。

function func() {
    console.log(&#39;linxin&#39;);}func.call();            // linxin

ログイン後にコピー

callとbindの違い

EcmaScript5ではbindというメソッドが拡張されており、以前のバージョンのIEとは互換性がありません。これは call と非常に似ており、最初のパラメーターは関数コンテキストとしてのオブジェクトを受け取り、パラメーターの 2 番目の部分は複数のパラメーターを受け取ることができます。
両者の違いは以下の2点です。

1.bind は関数を返します

var obj = {
    name: &#39;linxin&#39;}function func() {
    console.log(this.name);}var func1 = func.bind(obj);func1();                        // linxin

ログイン後にコピー

bind メソッドはすぐには実行されませんが、コンテキストを変更する関数を返します。ただし、元の関数 func の this は変更されておらず、依然としてグローバルオブジェクトウィンドウを指しています。

2.parameters

function func(a, b, c) {
    console.log(a, b, c);}var func1 = func.bind(null,&#39;linxin&#39;);func(&#39;A&#39;, &#39;B&#39;, &#39;C&#39;);            // A B Cfunc1(&#39;A&#39;, &#39;B&#39;, &#39;C&#39;);           // linxin A Bfunc1(&#39;B&#39;, &#39;C&#39;);                // linxin B Cfunc.call(null, &#39;linxin&#39;);      // linxin undefined undefined

ログイン後にコピー

callの使用では、2番目以降のパラメータをfuncメソッドの実パラメータとして渡しますが、func1メソッドの実パラメータはバインド内のパラメータに基づいて配置されます。

在低版本浏览器没有 bind 方法，我们也可以自己实现一个。

if (!Function.prototype.bind) {
    Function.prototype.bind = function () {
        var self = this,                        // 保存原函数
            context = [].shift.call(arguments), // 保存需要绑定的this上下文
            args = [].slice.call(arguments);    // 剩余的参数转为数组
        return function () {                    // 返回一个新函数
            self.apply(context,[].concat.call(args, [].slice.call(arguments)));
        }
    }}

ログイン後にコピー

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