違いをバインド適用呼び出します

今日の技術点が違いをバインド適用-call

入門

深く考え呼び出し、適用し、結合し、そしてこの機能は現在、理解するために、

この

これは私たちの日常の主要なオブジェクトコードが関数を呼び出すです

例えば:

    var obj = {
        foo: function(){
            console.info("this===>",this)
        }
    }
    var bar = obj.foo
    obj.foo()   // f打印出的this 就是obj
    bar()       //  打印出的this 就是window
    // 简单来讲就是谁调用函数this就指向谁

その後、通常の方法とそれらの機能の違いを呼び出し、それをリンク

  • 関数呼び出しMYFUN(B)として
  • オブジェクトのメソッドとして呼び出しobj.objFun()
  • コンストラクタ呼び出しは、バーが新しいアニマル(「猫」)=ましょうとして
  • (A、B、コンテンツ)myFun.callの方法として、関数を呼び出し
    、一般的に、我々は道の最初の3つに非常に精通しているであろうが、最後myFun.call(コンテンツ、b)は、フォーム(基本形式)を呼び出すようにするのが普通ですこのように、上記方法は、糖衣構文をパッケージ化されています。
  //myFun(a,b) ---> myFun.call(undefined,a,b);
  //obj.objFun() ---> obj.objFun.call(obj);
  因此this也就是我们上面式子中的content-->call的第一个参数

類似点と3つのコールの違いは、バインドを適用します

同じポイント
  • この問題点を変更するために使用することができます
  • 最初の3つのパラメータは指定されたコンテキストでこのオブジェクト(コンテンツ)を指しています
  • すべての3つは、後続の着信パラメータを利用することができます
異なる点
  • 戻り値は、新しいバインド機能で、プラスの呼び出しが実行されます
  • ビング方法は、結合機能と呼ばれる新しい関数を作成します
  • バインド後の呼び出しを容易にするために、対応する関数の戻り値を、;呼び出しはすぐに電話して適用されています
  • コールは、公知に向け徐々に後続のパラメータに転送されるときに便利な方法パラメーターの配列が適用され
練る
  • バインド()メソッドは、このバインドこの新しい機能は、最初のパラメータは、バインド、新しい関数の引数として呼び出しに使用されるパラメータの残りの部分を指定している、()と呼ばれる新しい関数を作成します。
var module = {
  x: 42,
  getX: function() {
    console.log('this', this)
    return this.x;
  }
}

var unboundGetX = module.getX;

console.log(module.getX)  // 直接是对函数的引用, this没有指定,this 为 window
console.log(module.getX()) // 使用对象module调用函数,所以this就是module
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined

var boundGetX = unboundGetX.bind(module);  
console.log(boundGetX());
// expected output: 42
コール
  • 何の役割コールがより実行時間の方法よりも短いでは、その対象範囲として、別のオブジェクトを使用することができるようにしたい場合は、それは、私が引数の形で希望の方法を実行する際に、対象におけるBのパスに渡され、オブジェクトBの目的の範囲のための方法は、置換されています
  // 定义: 调用一个对象的方法,以另一个对象作为当前对象
  // call的使用方法
  // call修改的方式采用的是代入法
  //父类 Person        
  function Person() {            
    this.sayName = function() { 
      return this.name;
    }        
   }        
   //子类 Chinese        
   function Chinese(name) {  
      //借助 call 实现继承            
      Person.call(this); 
      this.name = name; 
      this.ch = function() { 
        alert('我是中国人');           
      }                     
   }        
   //测试        
   var chinese = new Chinese('成龙'); // 调用 父类方法
   console.log(chinese.sayName());   //输出 成龙
適用します
  • 私たちは、呼び出し元の関数にパラメータの配列を構築する方法を適用してみましょう、それはまた、この値を選択するために私たちをことができます
  • 適用は、最初の2つの引数を受け入れ、この値に結合することであり、第二は、パラメータの配列であります
  • 最初の引数がnullの場合は、デフォルトのポイントウィンドウを未定義
    // apply的方法
    function add(a, b) {
        this.a = a;
        this.b = b;
        this.alert = function () {
            alert(this.a + this.b)
        }
    }
    function test() {
        add.apply(this, [5, 5]) //这里可以理解为 test函数中this等于add函数中的this
    }
    var c = new test()
    c.alert() //10

シナリオ

日々の開発では、おそらく非常に小さなパートナーまたはほとんど使用の多くに使用されていない、実際には、彼らが使用のヒントがたくさんあります

  • 最大と最小のデータファイルツール
  let basicTools = {
      arrMaxOrMin:function(type,arr){
          let result = Math[type].apply(null,arr);
          return result;
      }
  }
  console.info("最大值",basicTools.arrMaxOrMin("max",[1,2,3]))  // 输出为3
  console.info("最小值",basicTools.arrMaxOrMin("min",[1,2,3]))  // 输出为1
  • 追加の単純なデータ型の配列
  let basicTools = {
      arrAppendItem:function(arr1,arr2){
          return arr1.push.apply(arr1,arr2);
      }
  }

誰もがフルスタックエンジニア、建築家や混乱を経ても、道になることにあなたを助けるために大量のリソースを共有するためのヘルプにするために、簡単に学習効率的かつ無料。?? 947552909、またはWX::私たちは、フルスタックの学習Exchangeフロントエンド円をお勧めするためにここにいる。?Fxq1221623歓迎のグループディスカッションや交流学習交流にみんなと共通の進歩?。

一部の人々は学ぶことに情熱が、方向性の欠如、および表面上は無限にある知識の広大な海で、この時点で最も重要なことは把握を集中する必要がある技術を知ることで、回避役に立つ仕事をして、限られたエネルギーと状態を最大化するためにありますの。

最後に、すべての出会いに問題を願っていますし、フロントエンドプログラマを行う方法がわからない、私は将来のすべての作業であなたを希望し、すべての最高にインタビュー。

公開された35元の記事 ウォン称賛64 ビュー10000 +

おすすめ

転載: blog.csdn.net/tjx11111/article/details/104160854