javascriptの中のcall、appy、bindの使い方と違い

一.call、appy、bind作用
JavaScriptでは、call、appy、bindは、Functionオブジェクトが持つ3つの方法です.この三つの関数の存在意義は何ですか?答えは、関数の運転を変える時のthisの方向です.この3つの方法の使用と違いを実際の例で紹介します.
二.call
文法:fn.cal(thisArg,arg 1,arg 2,…)
thisArg:関数fnが動作するとき、この関数のthisはthisArgに結合されます.arg 1,arg 2,…:関数fnに必要なパラメータは、リストです.
私たちは直接例を見ます.

var a ={
    name : "test",
    fn : function (a,b) {
        console.log(this.name, a + b)
    }
}
var b={name:'test1'}
a.fn(1,2) //test 3
a.fn.call(b,1,2) //test1 3

a.fn(1,2)を実行し、fn中のthisがaを指すので、出力test 3はa.fn(1,2).call(b,1,2)を実行し、callによりfn中のthisがbを指すことを変更したので、出力test1 3を実行する.
注意事項:

thisArgは伝えません.あるいはnull、undefinedを伝えます.関数の中のthisはwindowオブジェクト

を指します.

thisArgは元の値(数字、文字列、ブール値)であり、関数中のthisは元の値の自動包装オブジェクト(String、Number、Boolean)

を指す.

thisArgはオブジェクトで、関数のthisはこのオブジェクト

を指します.

thisArgは関数名であり、関数のthisは関数

を指す.

の前の4点はデフォルトです.非厳格モードでは、厳しいモードでは少し違ってきます.

私たちは直接例を見ます.

function a(params) {
    console.log(this);
}
function b() {}
var obj = {
    name: '      '
};

//                                          
a.call();           //window               undefined
a.call(null);       //window               null
a.call(undefined);  //window               undefined
a.call(1);          //Number{1}            1
a.call('');         //String{''}           ''
a.call(true);       //Boolean{true}        true
a.call(b);          //function b(){}       function b(){}
a.call(obj);        //Object               Object

三.アプリ
文法:fn.call(thisArg,［arg 1,arg 2,...］)またはfn.call(thisArg,｛0:arg 1,1:arg 2,…,lenght:総個数｝
thisArg:関数fnが動作するとき、この関数のthisはthisArgに結合されます.[arg 1,arg 2,...]または形は、{0:arg 1,1:arg 2,…,lenght:総個数}:関数fnに必要なパラメータは、行列またはクラスの配列であり、call関数は行列またはクラスの各値を自動的にリストに分けて関数fnに与えます.
例は上記と同じです.callをapplyに換えるだけでいいです.他は同じです.上のコールを含めて、いくつかの注意事項は伝えないか、またはnullを伝えないかです.
四.ビッド
文法:fn.bind(thisArg,arg 1,arg 2,…)()
thisArg:関数fnが動作するとき、この関数のthisはthisArgに結合されます.arg 1,arg 2,…:関数fnに必要なパラメータは、リストです.
ビッドは実はコールと似ています.上記のいくつかの注意事項を含んでいます.つまり、nullを伝えたり、伝えたりしません.後の（）だけです.私たちは直接例を見ます.

 var a = {
    name: "test",
    fn: function (a, b) {
        console.log(this.name, a + b)
    }
}
var b = {
    name: 'test1'
}
a.fn.bind(b, 1, 2)

上のコードを実行して、コンソールが出力されていないことが分かりました.だから、私たちはビッドが新しい関数を作成するので、手動で呼び出さなければなりません.コードを変更します.

var a = {
    name: "test",
    fn: function (a, b) {
        console.log(this.name, a + b)
    }
}
var b = {
    name: 'test1'
}
a.fn.bind(b, 1, 2) //test1 3

上記は手動で呼び出して、正しい出力結果を見つけました.
五.call apply bindの三つの違いをまとめます.
1.callとapplyの使い方は同じです.唯一の違いはcallのパラメータがリストです.applyパラメータは配列2.bindとcallの使い方が同じです.唯一の違いはcallが自己実行関数になります.bindは手動で関数を呼び出す必要があります.
六.応用
1.継承

var Person = function (name, age) {
    this.name = name;
    this.age = age;
};
var Girl = function (name) {
    Person.call(this, name);
};
var Boy = function (name, age) {
    Person.apply(this, arguments);
}
var Boy1 = function (name, age) {
    Person.bind(this, name)();
}
var g = new Girl('xiaohong');
var b = new Boy('xiaoming', 100);
var b1 = new Boy1('xiaowang', 100);
console.log(g); //{name: "xiaohong", age: undefined}
console.log(b); //{name: "xiaoming", age: 100}
console.log(b1); //{name: "xiaowang", age: undefined}

上記の例では、4つのコンストラクタを定義し、newを通じてGirl、Boy、Boy 1の3つのコンストラクタを実用化して呼び出し、この3つのコンストラクタの中でそれぞれコール、apply、bindを使ってPersonの属性を継承します.
2.行列の最大値と最小値を求めます.

var ary = [0, 1, 1, 3, 4, 5, 6, 7];
console.log(Math.max(0, 1, 1, 3, 4, 5, 6, 7)); //7
console.log(Math.min(0, 1, 1, 3, 4, 5, 6, 7)); //0
var max = Math.max.apply(null, ary);
var min = Math.min.apply(null, ary);
console.log(max,min); //7 0

上記の例では、通常の場合、Math.max Math.minのパラメータはリストである必要があります.上の数字は0-7 8だけでいいですが、データが多いとパラメータに入れるのが面倒です.
だから、私たちはappyを利用して配列をリストに変換することができます.そうすると、直接変数を伝達することができます.最初のパラメータはここでnullを使用して、実際に他のものに変えられます.ここでは主にコール関数の配列リスト機能を使用します.
3.クラス行列行列行列

Array.prototype.slice.call(arrayLike)    Array.prototype.slice.apply(arrayLike)

具体的には、このjavascriptの擬似配列と配列を突き止めることができます.
4.配列追加
jsの中で、私達は配列に元素を追加します.普通はpushの方法を使います.

  var arr1 = [1,2,3];
  var arr2 = [4,5,6];
  arr1.push(4,5,6)
  console.log(arr1) //[1,2,3,4,5,6]

私たちもアプリの使い方ができます.

var arr1 = [1,2,3];
var arr2 = [4,5,6];
[].push.apply(arr1,arr2)
console.log(arr1) //[1,2,3,4,5,6]

上のコードの意味は、［］プッシュ方法を呼び出して、プッシュ方法のthisをcallでarr 1に指し、arr 2をパラメータリストに変えます.これで合併の目的を達成します.
5.変数の種類を判断する

Object.prototype.toString.call/apply(object);

具体的な詳細は他の文章toString()とObject.prototype.toString.call()を参照してください.