JSの中のthis、appy、call
9039 ワード
JSのthisは常に一つのオブジェクトを指していますが、具体的にはどのオブジェクトを指していますか?
具体的には、thisの指向を説明します.1.関数を対象とする方法が呼び出された場合、thisはその対象を指します.
2.普通の関数としての呼び出しの前の形式は、関数がオブジェクトの属性として呼び出されていません.関数がオブジェクト属性として呼び出されていない場合、このときのthisは常にグローバルオブジェクトを指しています.ブラウザではwindowオブジェクトがグローバルオブジェクトです.ブラウザではなくグローバルオブジェクトは何ですか?
「JavaScriptプログラミングの全解」という本の中ではこう解釈されています.
まとめてみます.関数が普通の関数として呼び出された場合、プラスとオフの属性は全体のオブジェクトの属性です.関数がオブジェクトの属性として呼び出された場合に、thisを加えない属性が指し示す結果とは違って、thisの属性が付加された場合、この関数のオブジェクトにthisの属性が付加されない場合には、thisはグローバルオブジェクトの属性を指します.
では、thisで関数を呼び出すのは同じです.メソッド内部でメソッドを呼び出した場合、thisを付けないと、グローバル関数で検索されます.
3.コンストラクタで使っているthisは、new演算子で関数を呼び出すと、この関数は常にオブジェクトに戻ります.通常、コンストラクタの中のthisは、このオブジェクトに戻ります.
4.appryとcallのthis引用は、関数ごとに2つの非継承的な方法を含む:appy()とcall()の両方の方法の用途は、いずれも特定の作用領域で関数を呼び出すことである.
また、applyとcallの作用効果は同じであり、違いは受信した第二のパラメータだけが違っていて、前者は一つのパラメータ配列を受信したので、Arayの例であっても良いし、argmentsオブジェクトであっても良い.一方、両方の最初のパラメータは、その中で関数を実行するスコープである.
具体的には、thisの指向を説明します.1.関数を対象とする方法が呼び出された場合、thisはその対象を指します.
var obj = {
a: 1,
getA: function(){
alert(this === obj); // true
alert(this.a); // 1
}
};
obj.getA();
難しいところはないようです.他の本を参考にして補足するところがありますか?2.普通の関数としての呼び出しの前の形式は、関数がオブジェクトの属性として呼び出されていません.関数がオブジェクト属性として呼び出されていない場合、このときのthisは常にグローバルオブジェクトを指しています.ブラウザではwindowオブジェクトがグローバルオブジェクトです.ブラウザではなくグローバルオブジェクトは何ですか?
window.name = "Stan";
var getName = function(){
alert(this.name); // Stan
};
getName();
ここではthis.nameを直接nameと書いていますが、違いはありません.なぜですか?また、関数の参照値を変数に割り当てて呼び出します.結果は上記と同じです.次のように window.name = "Stan";
var obj = {
name: "Stanford",
getName: function(){
alert(this.name);
}
};
var pointer = obj.getName;
pointer(); // Stan
ここでthis.nameを直接nameに変えたら、結果も同じです.上のなぜ解決したのかは、ここで同じです. window.name = "Stan";
var obj = {
name: "Stanford",
getName: function(){
alert(this.name);
}
};
var pointer = obj.getName;
pointer(); // Stan
var obj2 ={
name: "Dance",
getName2: pointer
};
obj2.getName2(); // Dance
前のdemoに基づいて、pointerをget Name 2に割り当てました.そして、Obj 2の対象の属性としてget Name 2を呼び出しました.このときはDanceです.ここではよく分からないことはありませんが、面白いところは、this.nameをnameに換えると、結果Stnとなります.ここでは加thisの前後の違いが見られますが、なぜですか?「JavaScriptプログラミングの全解」という本の中ではこう解釈されています.
Java this, 。
。 JavaScript this 。
this.name name, name.
また、普通の関数として呼び出せば、結果は違ってきます.下のように上のコードを変更します. window.name = "Stan";
var obj = {
name: "Stanford",
getName: function(){
alert(this.name);
}
};
var pointer = obj.getName;
pointer(); // Stan
var obj2 ={
name: "Dance",
getName2: pointer
};
var pointer2 = obj2.getName2;
pointer2(); // Stan
thisをプラスしないのに関わらず、この時の結果はすべてStonで、これがどうしてなことを考えてみますか?まとめてみます.関数が普通の関数として呼び出された場合、プラスとオフの属性は全体のオブジェクトの属性です.関数がオブジェクトの属性として呼び出された場合に、thisを加えない属性が指し示す結果とは違って、thisの属性が付加された場合、この関数のオブジェクトにthisの属性が付加されない場合には、thisはグローバルオブジェクトの属性を指します.
では、thisで関数を呼び出すのは同じです.メソッド内部でメソッドを呼び出した場合、thisを付けないと、グローバル関数で検索されます.
function func2(){
alert("global function");
}
var obj = {
name: "Stan",
func1: function(){
this.func2();
},
func2: function(){
alert(this.name);
}
};
obj.func1(); // Stan
thisを取れば、結果はglobal functionです.3.コンストラクタで使っているthisは、new演算子で関数を呼び出すと、この関数は常にオブジェクトに戻ります.通常、コンストラクタの中のthisは、このオブジェクトに戻ります.
var myClass = function(){
this.name = "Stan";
};
var obj = new myClass();
alert(obj.name); // Stan
しかし、コンストラクタが明示的にオブジェクトを返すと、今度はそのオブジェクトを返します. var myClass = function(){
this.name = "Stan";
return {
name: "Dance"
}
};
var obj = new myClass();
alert(obj.name); // Dance
しかし、コンストラクタが明示的に任意のデータを返したり、非オブジェクトタイプのデータを返したりしないと、上のような問題は発生しません.4.appryとcallのthis引用は、関数ごとに2つの非継承的な方法を含む:appy()とcall()の両方の方法の用途は、いずれも特定の作用領域で関数を呼び出すことである.
window.color = "red";
var col ={color : "blue"};
function getCol(){
alert(this.color);
}
getCol.call(this); // red
getCol.call(window); // red
getCol.call(col); // blue
コールを使って関数が動作するスコープが拡張されているのが見えます.この問題をもっと見てください. <body> :
<div id = "list">list</div>
<js> :
document.getElementById('list').onclick = function(){
alert(this.id); // list
var func = function(){
alert(this.id); // undefined
};
func();
};
どうすればいいですか?関数内のthisをコールで修正します. document.getElementById('list').onclick = function(){
alert(this.id); // list
var func = function(){
alert(this.id); // undefined
};
func.call(this);
};
func.call()は、前のobj.get Name()のように、関数としての属性で呼び出されます.普通の関数として呼び出されるのではなく、この時のthisは内部のidを指しています.大域のidではなく.また、applyとcallの作用効果は同じであり、違いは受信した第二のパラメータだけが違っていて、前者は一つのパラメータ配列を受信したので、Arayの例であっても良いし、argmentsオブジェクトであっても良い.一方、両方の最初のパラメータは、その中で関数を実行するスコープである.