javascriptにおけるcall()、appy()、bind()の方法の違い
9158 ワード
JavaScriptでは、thisの指向はダイナミックに変化しています.プログラムを書く過程で、thisの指向を無意識に破壊する可能性があります.だから、thisの意味を固定できる技術が必要です.そこで、call、applyとbindの3つの方法があります.関数の内部thisの指向を変えます.関数には「定義時の文脈」と「実行時の文脈」があります.「文脈は変えられます」という概念です.
call、appy、bind方法の共通点と違い: appy、call、bindの3つは、関数を変更するためのthisオブジェクトの指向です. appy、call、bindの3つの最初のパラメータは、いずれもthisが指すオブジェクト、すなわち、指定したいコンテキスト(関数の呼び出し毎に特殊な値があります.今回呼び出したコンテキスト(context)です.これはthisキーワードの値です. appry、call、bindの3つは、後続のパラメータを利用して、callとbindの参照方法と同じです. bitは対応関数を返します.後で起動しやすくなります.apply、callはすぐに を呼び出します.
コール():
構文:
説明:コール方法は、他のオブジェクトの代わりに一つの方法を呼び出すために使用されてもよい.call方法は、関数のオブジェクトコンテキストを初期のコンテキストから、thisObjによって指定された新しいオブジェクトに変更することができる.
thisObjの取得値は、(1)伝えない、またはnull、undefined、関数のthisがwindowオブジェクト(2)に対して他の関数の関数名を伝達し、関数のthisがこの関数の参照(3)伝達文字列、数値またはブールタイプなどの基幹タイプを指し、関数のthisが対応する包装対象を指します.Boolean(4)は一つのオブジェクトを伝え、関数の中のthisはこのオブジェクトを指します.
(2)
重要なのは最後のコードです.animalの方法をdogに実行するという意味です.animalのshow Name()方法をdogに実行するとも言えます.
(3)継承
apply():
構文:
説明:もしargArayが有効な配列ではないか、あるいはargmentsオブジェクトではない場合、TypeErrorを引き起こすことになる. において、argArayおよびthisObjのいずれかのパラメータが提供されていない場合、Globalオブジェクトは、thisObjとして使用され、どのパラメータも伝達されない. callとappyの違いは、appyとcallの両方にとって、全く同じ作用です.ただパラメータを受け取る方式は違います.
両方の機能が同じなら、どれを使えばいいですか?
JavaScriptでは、ある関数のパラメータの数が固定されていませんので、適用条件といえば、パラメータが明確に数を知っている時にコールします.不確定な時はappyでパラメータpshを配列に送ります.パラメータの数が不確定な場合、関数の内部はargmentsというクラスの配列オブジェクトによってすべてのパラメータを巡回することもできます.
bind():
bindはEcmaScript 5に拡張された方法(IE 6,7,8はサポートされていません)bind()の方法は、appyとcallに似ています.関数の内部thisの方向を変えることもできます.MDNの説明では、bind()方法は、バインディング関数と呼ばれる新しい関数を作成します.このバインディング関数を呼び出すと、バインディング関数が作成されたときにbind()方法の最初のパラメータをthisとして入力します.
注意:bindメソッドの戻り値は関数です.
call、appy、bind方法の共通点と違い:
コール():
構文:
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定義:現在のオブジェクトを別のオブジェクトに置き換える方法を呼び出します.説明:コール方法は、他のオブジェクトの代わりに一つの方法を呼び出すために使用されてもよい.call方法は、関数のオブジェクトコンテキストを初期のコンテキストから、thisObjによって指定された新しいオブジェクトに変更することができる.
thisObjの取得値は、(1)伝えない、またはnull、undefined、関数のthisがwindowオブジェクト(2)に対して他の関数の関数名を伝達し、関数のthisがこの関数の参照(3)伝達文字列、数値またはブールタイプなどの基幹タイプを指し、関数のthisが対応する包装対象を指します.Boolean(4)は一つのオブジェクトを伝え、関数の中のthisはこのオブジェクトを指します.
function a(){
console.log(this); // a this
}
function b(){}
var c={name:"call"}; // c
a.call(); //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
a.call(null); //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
a.call(undefined); //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
a.call(1); //Number {1}
a.call(''); //String {"", length: 0}
a.call(true); //Boolean {true}
a.call(b); //ƒ b(){}
a.call(c); //{name: "call"}
上のことが理解できないなら、大丈夫です.もう一つの例を見ます.function class1(){
this.name=function(){
console.log(" class1 ");
}
}
function class2(){
class1.call(this); // , this class1( class2 class1)
}
var f=new class2();
f.name(); // class1 , class1 name class2
常用例:(1)function eat(x,y){
console.log(x+y);
}
function drink(x,y){
console.log(x-y);
}
eat.call(drink,3,2);
出力:5この例では、eatでdrink、eat.cal(drink、3,2)==eat(3,2)を置き換えるという意味ですので、運転結果は、consolone.log(5);注意:jsの関数はオブジェクトであり、関数名はFunctionオブジェクトへの参照です.(2)
function Animal(){
this.name="animal";
this.showName=function(){
console.log(this.name);
}
}
function Dog(){
this.name="dog";
}
var animal=new Animal();
var dog=new Dog();
animal.showName.call(dog);
出力:dogは上のコードの中で、私達はDocgの中でショーのName方法がないことを見ることができて、それではどうして(this.name)の値はdogですか?重要なのは最後のコードです.animalの方法をdogに実行するという意味です.animalのshow Name()方法をdogに実行するとも言えます.
(3)継承
function Animal(name){
this.name=name;
this.showName=function(){
console.log(this.name);
}
}
function Dog(name){
Animal.call(this,name);
}
var dog=new Dog("Crazy dog");
dog.showName();
出力:Crazy dog Animal.call(this)とは、アニマルオブジェクトをthisオブジェクトの代わりに使用すると、Docgは直接Animalの属性と方法を呼び出すことができます.apply():
構文:
apply([thisObj[,argArray]])
定義:オブジェクトを別のオブジェクトに置き換える方法を適用します.説明:
function class1(args1,args2){
this.name=function(){
console.log(args,args);
}
}
function class2(){
var args1="1";
var args2="2";
class1.call(this,args1,args2);
/* */
class1.apply(this,[args1,args2]);
}
var c=new class2();
c.name();
出力:1 2 callはパラメータを順番に渡す必要がありますが、appyはパラメータを配列に入れます.両方の機能が同じなら、どれを使えばいいですか?
JavaScriptでは、ある関数のパラメータの数が固定されていませんので、適用条件といえば、パラメータが明確に数を知っている時にコールします.不確定な時はappyでパラメータpshを配列に送ります.パラメータの数が不確定な場合、関数の内部はargmentsというクラスの配列オブジェクトによってすべてのパラメータを巡回することもできます.
bind():
bindはEcmaScript 5に拡張された方法(IE 6,7,8はサポートされていません)bind()の方法は、appyとcallに似ています.関数の内部thisの方向を変えることもできます.MDNの説明では、bind()方法は、バインディング関数と呼ばれる新しい関数を作成します.このバインディング関数を呼び出すと、バインディング関数が作成されたときにbind()方法の最初のパラメータをthisとして入力します.
注意:bindメソッドの戻り値は関数です.
var bar=function(){
console.log(this.x);
}
var foo={
x:3
}
bar();
bar.bind(foo)();
/* */
var func=bar.bind(foo);
func();
出力:undefined 3原文リンク:JSのcall、appy、bind方法