apply()とcall()メソッドの詳細

原生開発の基礎を必要とせず、京東商城を完璧に表現することができます.「京東商城システムを混合開発し、大フロントエンドを早期に配置する」課程はvue、Android、IOSなどの現在流行しているフロントエンドとモバイルエンド技術を融合させ、古典的な電子商取引アプリ--京東を混合開発する.カリキュラムは、さまざまな複雑な機能と知識点を完璧に融合させ、技術原理から開発ラインまで、スター製品開発の全過程を実感させます.機能の実現に加え、一流のユーザー体験や優れたインタラクティブ設計など、開発の視野を広げています.
JSの各関数には,統合されていない2つのメソッドapply()とcall()が含まれている.この2つのメソッドの用途はいずれも特定の役割ドメインで関数を呼び出すことであり,関数内のthisオブジェクトの値を設定することに等しい2つのメソッドの唯一の違いは,受け入れるパラメータが異なるappay()メソッドが実行関数を受け入れる役割ドメインと配列であり,call()メソッドが実行関数を受け入れる役割ドメインと直接呼び出す関数のパラメータは次の例を参照する.

//       sum    apply call     
        function sum (a , b) {
            console.log(a + b);
        }
        
        //   apply        
        function callSum1 (a, b) {
            sum.apply(this, [a, b]);
        }

        //   apply    arguments  ，        
        function callSum2 (a, b) {
            sum.apply(this, arguments);
        }

        //   call    sum        a, b
        function callSum3 (a, b) {
            sum.call(this, a,b);
        }

次に、callSum 1、callSum 2、callSum 3の3つの関数をテーブルに分けて呼び出します.

callSum1(1, 1);
// 2
callSum2(1, 1);
// 2
callSum3(1, 1);
// 2

結果は同じです.applyとcallメソッドの定義が特定の役割ドメインで関数を呼び出すことを振り返ってみましょう.

function callSum1 (a, b) {
	//sum.apply(this, [a, b]);
    console.log(a + b);
}

このように見ると直感的ではないかもしれませんが、次の例を見てみましょう.

//         name：javascript
        var name = 'javascript';

        //       android，   name  android
        var android = {
            name: 'android'
        }

        //       ios，   name  ios ( javascript  function    )
        var ios = function () {
            this.name = 'ios';
        }

        //   name  
        function consoleName () {
            console.log(this.name);
        }

そして私たちはそれを呼び出します

 consoleName.call(window);   // javascript
 consoleName.call(this);   // javascript
 consoleName.call(android);     // android
 consoleName.call(ios);   // undefined

最初の3つの呼び出しは、特定の役割ドメイン内で関数を呼び出すことで、関数内のthisオブジェクトの値を変更したことに相当します.これは、メソッドconsoleNameを指定した役割ドメインに配置し、指定した役割ドメインで次のコードに相当します.

consoleName.call(window);
 // window.consoleName = function () {
 //     console.log(this.n);
 // }
 //  window.consoleName();

 consoleName.call(this);
 // window.consoleName = function () {
 //     console.log(this.n);
 // }
 //  window.consoleName();

 consoleName.call(android);
//	var android = {
 //           n: 'android',
 //           consoleName: function () {
 //               console.log(this.n);
 //           }
 //       }
 // android.consoleName();

しかし、なぜconsoleName.call(ios);を呼び出すとundefinedが印刷されますか?iosの定義に注目しましょう

var ios = function () {
    this.n = 'ios';
}

consoleName.call(ios);
// var ios = function () {
//            this.n = 'ios';
//            consoleName: function () {
//                console.log(this.n);
//           }
//        }

見えますか?私たちは方法に属性を追加したのと同じですが、iosのような私たちはどうすればいいですか?修正後のコードを見てください

//   Ios       
        var Ios = function () {
            this.n = 'ios';
        }
//   Ios  ，      Ios        consoleName  ， consoleName this   Ios   
 consoleName.call(new Ios());

印刷結果が期待どおり