JavaScriptにおけるthisキーワードの方向変更の3つの方法(appy、call、bind)

まず、thisのキーワードを調べてみます.thisキーワードは関数呼び出しの内容に関連します.関数のいくつかの呼び出し方法:
一般関数呼び出し方法としてを呼び出す.
コンストラクタとしてを呼び出す.
appy/call方法を使用してを呼び出します.
Function.prototype.bind方法ES 6矢印関数しかし、関数がどのような方法で呼び出されたかに関わらず、この関数または方法を呼び出す人が誰を指すかを覚えておく必要があります.
一般関数の呼び出し

var age = 18;
function person(){
    this.name = "Tony";
    console.log(this);      //window
    console.log(this.name); //Tony
    console.log(this.age);  //18
}
person();

コードで定義された一般関数person， は、実際にpersonは、グローバルオブジェクトwindowの一つの方法として呼び出されるwindow.person()である.したがって、windowオブジェクトがperson方法を呼び出した場合、personの関数のうちのthisは、window，を指しながら、windowは、他の属性nameを有しており、値は「Tony」である.
グローバル変数を定義します.これはwindowの属性に相当します.person関数を呼び出したときには、そのthisはwindowを指すので、関数内部でage変数にアクセスできます.これは関数内部で大域変数にアクセスできると説明します.
メソッドとして呼び出す

var person = {
    name : "Tony",
    showName:function(){
        console.log(this.name);
    }
}
person.showName();

var name = "Tom";
var showname = person.showName;
showname();

オブジェクトのpersonを定義する方法はshowNameを含む.オブジェクトのperson内でメソッドを呼び出して戻るのはトニーであり、明らかにthisはオブジェクトのpersonを指している.
グローバル変数nameをもう一つ定義して、person.showName方法を変数ショーナmeに割り当てます.グローバルで定義されているからショーナmeもwindowの属性に相当します.この時shownameを呼び出すthisはwindowを指すので、戻り値はグローバル変数「Tom」です.

var personA = {
    name : "Tony",
    showName:function(){
        console.log(this.name);
    }
}
var personB = {
    name : "Tom",
    sayName:personA.showName
}
personB.sayName();    //Tom

personBオブジェクト中の方法は、personaのメソッドを呼び出し、showNameはpersonaで定義されていますが、personBを呼び出して、そのthisはpersonBを指します.
コンストラクタとして呼び出す

function Person(name){
    this.name = name;
}
var personA = new Person("Tony");
console.log(personA.name);

構造関数newからの例では、thisはこの実例的なオブジェクトを指す.
ここでは、thisの変化を指す3つの方法を調べます.
JavaScriptにおいて、call、apply、bindはFunctionオブジェクトが備える3つの方法であり、この3つの方法の主な役割は、関数内のthisを変更することである.その共通点は、関数のthisオブジェクトの指向を変えるために使われていることが分かります.また、3つの最初のパラメータはいずれもthisが指すオブジェクトであり、指定したいコンテキスト(関数の呼び出し毎に特殊な値があります.今回呼び出したコンテキスト(context)です.これはthisキーワードの値です.)を再利用して、後続パラメータを参照してください.これらの違いは、つまり、参照の違いです.bind は、対応する関数を返します.後で起動しやすくなります.apply 、 call すぐに呼び出します.
アプリ()方法 
二つのパラメータを受け取ります.一つは関数動作のスコープ、もう一つはパラメータ配列です.
構文:

apply([thisObj [,argArray] ]);

定義:オブジェクトを別のオブジェクトに置き換える方法を適用します.
説明:argArayが有効な配列ではないか、またはargmentsオブジェクトではない場合、結果として生じることになります. Type Errorは、argArayおよびthisObjのいずれかのパラメータが提供されていない場合、GlobalオブジェクトをthisObjとして使用する.

function Person(name){
    this.name = name;
    this.showName = function(){
        console.log(this.name);
    }
}
function Student(name){
    Person.apply(this,arguments);
}
var stu = new Student("Tony");
stu.showName();

コール方法 
最初のパラメータはappy()法と同じですが、関数に渡すパラメータは列挙しなければなりません.
構文:

call([thisObject[,arg1 [,arg2 [,...,argn]]]]);

定義:現在のオブジェクトを別のオブジェクトに置き換える方法を呼び出します.
説明: call方法は、他のオブジェクトの代わりに一つの方法を呼び出すために使用されてもよく、call方法は、関数のオブジェクトコンテキストを初期のコンテキストからthisObjによって指定された新しいオブジェクトに変更することができる.
thisObjの値を取る場合:

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

を指します.

は他の関数の関数名を伝達し、関数のthisはこの関数の参照

を指す.

は文字列、数値またはブールタイプなどの基礎タイプを伝達し、関数の中のthisはString、Number、Boolean

のような対応する包装対象を指す.

は一つのオブジェクトを伝達し、関数のthisはこのオブジェクト

を指す.
コール方法のいくつかの一般的な例:
1.

function add(a,b){
    console.log(a+b);
}
function subtraction(a,b){
    console.log(a-b);
}
add.call(subtraction,3,1);    //4

足し算関数、足し算関数を定義して、最後の呼出文の意味は足し算で引き算を取って、減算関数の中でcallの方法でthisの方向を変えました.a-bはもう計算しなくて、作用足し算のa+bです.
2.

function Student(){
    this.name = "Tom";
    this.showName = function(){
        console.log(this.name);
    }
}
function Teacher(){
    this.name = "Tony";
}
var stu = new Student();
var tea = new Teacher();
stu.showName.call(tea);

学生の関数を定義します.属性nameと方法showNameがあります.先生の関数はname属性だけです.最後の呼出文の意味は学生の方法を先生の関数に使って実行します.たとえ先生はこの方法がないとしても.
3.

function Parent(name){
    this.name = name;
    this.showName = function(){
        console.log(this.name);
    }
}
function Son(name){
    Parent.call(this,name);
}
var baby = new Son("Tony");
baby.showName();

Part.call(this,name)とは、息子の関数の中のthisオブジェクトを親というオブジェクトで置き換えるという意味です.息子の関数では、直接に親のオブジェクトの属性と方法を呼び出すことができます.これは継承です.
ビッド()bind()の最も簡単な使い方は、どのように呼び出しても同じthis値がある関数を作成することである.

var person = {
    name : "Tony",
    showName : function(){
        console.log(this.name);
    }
}
person.showName();      //Tony

var name = "Tom";
var getName = person.showName;
getName();              //Tom

var boundGetName = getName.bind(person);
boundGetName();         //Tony