02.thisの語法
3804 ワード
前の話です.JavaScriptプログラミングにおいて、thisキーワードはいつも私達に疑問を感じさせます.個人的にはthisと他の言語とは大きく違っています.JavaScriptのthisはいつも一つのオブジェクトを指しています.具体的にはどのオブジェクトを指していますか?
1.オブジェクトとしてのメソッド呼び出し
オブジェクトとして関数を呼び出す方法は、オブジェクトを指すthisです.
関数
JavaScriptにはクラスがありません.クラスがありません.でも
一般的な関数呼び出しと比較して、Funtions.prototype.callまたはFunction.prototype.appyを使って
1.オブジェクトとしてのメソッド呼び出し
オブジェクトとして関数を呼び出す方法は、オブジェクトを指すthisです.
var obj = {
name:" ",
getName:function(){
alert(this === obj); // true
alert(this.a); // : 1
}
}
2.一般関数として呼び出す関数
,
オブジェクトの属性が呼び出されたとき、つまり私たちがよく話している
は、ブラウザのJavaScriptにおいて、グローバルオブジェクトは私たちが言っているwindowオブジェクトです. window.name=" ";
//name = " "; // window
var getName = function () {
return this.name;
}
console.log(getName());
または: window.name=" ";
var myObject = {
name : " ",
getName:function () {
return this.name;
}
};
//
console.log(myObject.getName());
//
//1.
var newGetName = myObject.getName;
console.log(newGetName());
開発において、私たちは常にダイナミック要素のバインディング方式を使用しています.例えば、あるdivノードのイベント関数の内部に、局部的なcalback方法があります.calback方法はまた普通の関数として呼び出されると、calback内部のthisはwindowになります. // , window id
window.id=" window ";
//
document.getElementById("div1").onclick=function () {
alert(this.id);// div1
//
var callback = function () {
alert(this.id);
}
//
callback();
}
簡単な解決法:最も容易に把握されるべきスキームでもあり、変数によってdivノードの
を保存することができる. // , window id
window.id=" window ";
//
document.getElementById("div1").onclick=function () {
alert(this.id);// div1
var _self = this;//
//
var callback = function () {
alert(_self.id);
}
//
callback();
}
3.コンストラクタ関数の呼び出しJavaScriptにはクラスがありません.クラスがありません.でも
:this (window)
から
の演算子を提供してくれます.私たちが見ているコンストラクタはもう一つの種類に似ています.いくつかの内蔵関数を除いて、ほとんどのJavaScript関数はコンストラクタとして重点的に使用できます.new演算子を使用して関数を呼び出すと、
. var Person = function () {
this.name=" ";
}
var p1 = new Person();//new ,
alert(p1.name);// :
しかし、newがコンストラクタを呼び出す時に、もう一つの問題に注意しなければならない.コンストラクタが一つのオブジェクトに戻ると、その結果は前のthis(現在のオブジェクト)に戻らず、このObjectオブジェクトに戻ると、その結果も変化します. var Person = function () {
this.name=" ";
return {//
name:" "
}
}
var p1 = new Person();//new
alert(p1.name); // :
コンストラクタが表示されていないデータを返したり、非オブジェクトタイプのデータを返したりすると、上記のようなことにはなりません. var Person = function () {
this.name=" ";
return " ";// string
}
var p1 = new Person();//new
alert(p1.name); // :
4.Function.prototype.callまたはFuntions.prototype.appy呼び出し一般的な関数呼び出しと比較して、Funtions.prototype.callまたはFunction.prototype.appyを使って
new
var obj1 = {
name:" ",
getName:function () {
return this.name;
}
}
var obj2 = {
name:" "
}
console.log(obj1.getName());//
console.log(obj1.getName.apply(obj2));//this obj2