自己実行関数、mapサイクル、callとappyの使い方

20912 ワード

JavaScript

すぐに関数式を実行します.(自己実行関数)
自動実行関数の書式

//1.                  
    (function (){}(
        alert(0);
    ));

//2.            ，          
    (function (){
        alert(0);
    }) ();

//                

    +function (){
        alert(0)
    }()


     -function (){
        alert(0)
    }()



      !function (){
        alert(0)
    }()



     ~function (){
        alert(0)
    }()


     ^function (){
        alert(0)
    }()

    //

サンドボックスモード:
砂箱とは現実世界をシミュレートするものです.沙箱の中でいかなる変化が発生しても現実世界に対していかなる影響を与えません.沙箱は隔離の効果を実現します.外は砂箱に影響を与えません.
jsのサンドボックスモード

(function(w){
            //           

            //       

            //    ，   window         
            //   ： window.$ = w.$

        })(window)

サンドボックスモードでは、windowまたは他の内容をパラメータとしてサンドボックスに入る理由:

はサンドボックスの本質が隔離されるので、直接に砂箱の中で外部の内容を使うとこの隔離の基本原則が破壊されます.だから、外界のものを参考にしてサウジアラビアに伝えて使用すると、サンドボックスの中で使うのは完全にサンドボックスの中身です.

はコード圧縮に有利です.内蔵対象の名称は圧縮できないので、パラメータとして伝わったら、私達が使っているのはイメージネームです.イメージは圧縮されます.

サンドボックスモードは、一般的にフレーム、コンポーネント、プラグインなどに使用されます.
forEach方法とmap方法
forEach方法はES 5によって新たに追加された方法で、配列を高速で巡ることができます.そのコールバック関数には三つのパラメータがあります.以下でそのフォーマットを見てみましょう.

 var  arr = [1,2,3,4,5];

 arr.forEach(function(value,index,arr){
     console.log(value);
 })

 //  forEach        ；(arr       )

 //         forEach      ；

 //                forEach  
 Array.prototype.myForEach = function (callback){
    //   this.   --> Array    new     （         ）
     for(var i = 0; i < this.length; i ++){

         callback(this[i], i, this);
     }
 }
 // forEach         ，      
 //              ；
 var arr1 = [1,2,3,4,5];
arr1.myForEach(function(value,index){

    console.log(value);
})

//

更にmap方法を見てみますと、map方法はforEachと原理が基本的に同じです.map方法には戻り値がありますが、戻り値は配列要素と一対一に対応するもう一つの配列(マッピング)、map方法の戻り値です.実は、mapに伝えられたコールバック関数の毎回呼び出した戻り値を新しい配列に結合して、mapの戻り値とします.

    var arr = [1,2,3,4,5];
    var result = arr.map(function(value,index){
        console.log(value);
        return value;
    })

    console.log(arr);
    console.log(result); 
    //arr   result          ；

    //         map       ；
    Array.prototype.myMap = function(callback){

        var result = [];
        for(var i = 0; i < this.length; i++){

            var res = callback(this[i], i, this);
            result.push(res);;
        }

        return result;
    }

    //      map      String Number         ；
   var arr1 = [1,2,3,4,5];
   var res =  arr1.myMap(String);  //         string  
   console.log(res);    //["1" , "2", "3", "4", "5"]

thisのいくつかの指向

1.  
     function test(){
            console.log(this);  
        }

        var obj = {};
        obj.test = test;
        obj.test();   // this  window



2.
        var obj = {
            test: function(){
                console.log(this);
            }
        }

         var test = obj.test;
         test();    // this  window
        new obj.test();     // this  test         


3.
        var arr = [
            function(){
                console.log(this);
            },
            function(){
                console.log(this);
            }
        ];

        arr[0]();    // this        


4.
        var length = 10;
        function test(){
            arguments[0]();
        }

        test(function(){
            console.log(this.length); //   this       ；
                                     //   length 1（      ）；
        })




5.  //           ，this   

        function Person(name,age){
            var obj = new Object();
            obj.name = name;
            obj.age = age;
            console.log(this);
            return obj;
        }

        var p = Person("  ",18); //   this  window;


6. //         ，this   

    function Person(name,age){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        console.log(this);
        return obj;
    }
    ar p = new Person("   ", 18);
    // this     Person       

    //        ，  return obj        return    return              new   this   ；

関数の4つの呼び出しモード
1.関数名()

        function test(){
            console.log(this);
        }

        test();

2.メソッドコールモード:オブジェクト名、メソッド名()、オブジェクト名方法名.

var obj = {

    test: function(){
        console.log(this);  
    }
}

obj.test();
obj["test"]();

3.コンストラクタ呼び出しモード:new関数名();

    function Person(){

        console.log(this);
    }

    var p = new Person();

4.コンテキストコールモードを実行します.
コンテキストを実行します.私たちは一つの方法を書く時、いつも一つのキーワードthisを使って、thisの方向はここで言っている実行コンテキスト(実行環境)です.
1.コール

コールの対象は関数function

でなければなりません.

callの最初のパラメータは、コンテキストを変更した後に指すオブジェクトであり、

の第2のパラメータの開始は、任意のパラメータを受信することができ、これらのパラメータは、functionのパラメータとしてfunctionにコールを呼び出す方法として直ちに

を実行することができる.


    function test(a, b){
        console.log(this);
        return a + b;
    }

    var obj = {
        name : "  "
    }

    console.log(test.call(obj,1,2)); //    this  obj     window

ここでコールと言えば、Object.prototype.toString.callと言わざるを得ません.

    var arr = []
    var str = Object.prototype.toString.call(arr);
    console.log(str); //[object Array];
    //     Object    toString    this  arr；

   //             Obejct.prototype.toString.call  

   Obejct.prototype.myToString = function(){

        var res = "[";
        res += typeof this;
        res += " ";
        res += this.constructor.name;
        res += "]";
        return res;
   }
   var arr = [];
   var date = new date()

   var str = Object.prototype.myToString.call(arr);
   console.log(str);  //[obejct Array];

   var str = Object.prototype.myToString.call(date);
   console.log(str);  // [object Date]

   //            Object.prototype.toString.call      
   //     call      ；

2.appy

はコール方法の使用と基本的に一致していますが、2つのパラメータしか受信していません.この2つのパラメータは1つの配列またはクラスの配列でなければなりません.これもこの2つの方法の重要な違いです.


    function test(a, b){
        console.log(this);
        return a + b;
    }

     var obj = {
        name : "  "
    }

    console.log(test.call(obj,[1,2])); //this    obj

callとappyの方法は注意すべきところを使います.

方法は、最初のパラメータを渡さないと、関数の中のthisがwindowオブジェクトを指します.

call/applyメソッドの最初のパラメータが入力された値タイプのデータは、自動的に対応する参照タイプのデータに変換され、この参照タイプのデータにthisを指します.

cal/appy方法の最初のパラメータがnullまたはundefinedである場合、thisはwindowオブジェクト

を指す.
具体的な状況は下記のコードを見ます.

1.
     function test(a, b){
        console.log(this);
        return a + b;
    }

     var obj = {
        name : "  "
    };

     console.log(test.call(1,2)) //this   window


2.


     function test(a, b){
        console.log(this);
        return a + b;
    };

     var obj = {
        name : "  "
    };

     console.log(test.call("a",1,2)) //this   String

3. 


     function test(a, b){
        console.log(this);
        return a + b;
    };

     var obj = {
        name : "  "
    };

     console.log(test.call(null,1,2)) //this   window

コンテキストコールモードのアプリケーション

は、クラス行列を行列

に変換することができる.

    var fakeArr = {

        0: "a",
        1: "b",
        2: "c",
        length: 3

    };

    var realArr = []

    realArr = realArr.concat.apply(realArr, fakeArr);
    realArr = realArr.push.apply(realArr, fakeArr);
    realArr = Array.prototype.slice.call(fakeArr);
 //                     

//     ，          slice       

Array.prototype.mySlice = function (startIndex,endIndex){
    var arr = [];
    //     slice               
    startIndex = startIndex || 0; 
    endIndex = endIndex || arr.length;
    for(var i = startIndex; i < endIndx; i++){
        arr.push(this[i]);
    }

    return arr;
}

は最大値

を求めるためにも使用できます.

    //                  
    var arr = [22,33,4,666,12,22,34,56,21];
    var max = arr[0];
    for(var i = 1; i < arr.length; i++){
        max =  max > arr[i] ? max : arr[i];
    }
    console.log(max);

    //     apply    
   max = Math.max.apply(Math,arr);
   console.log(max);
   //  apply     ~~

私達もcall詐欺構造関数を利用して相続を実現できます.

function Person(){
            //this      Student   call    Person       new     ，      this             Student new     

            this.name = "  ";
            this.age = 18;
        }

        function Student(){
            //this new     
            Person.call(this);
            //Person.call(new     )
            //1.   Person  
            //2.  Person    this   new       

            this.stuNo = 10086;
        }

        var stu = new Student();
        console.log(stu.name);  //

Data at the root level is invalidエラーの解決方法について