javascriptにおけるthisの指向について
2119 ワード
javascriptの中でthisの指す理解に対して簡単に書いて、またどのようにthisの方向を変えますか?
一、this指向
まずDOMを取得します
直接呼び出し、このときthisはbtnを指します.
1.appyappy()メソッドは他のオブジェクトをハイジャックする方法で、他のオブジェクトの属性を継承します.この方法は2つのパラメータを受信して呼び出します.最初のパラメータはfunctionクラスのthisオブジェクトの代わりになり、2番目のオブジェクトは配列であり、パラメータとしてfunctionに伝えられます.
1:イベントでは、thisは、このイベントをトリガするオブジェクトを指します.2:thisは常に関数の直接的な使用者を指します.3:コンストラクタのthisは、現在のオブジェクトを指します.
一、this指向
まずDOMを取得します
var btn = document.getElementById("btn");
1.イベントでは、このイベントをトリガするオブジェクト(特に、IEの中のatachEventの中のthisは常にグローバルオブジェクトwindowを指す)を指す.btn.onclick = function(){
this.style.color = "red";// this btn
};
2.thisは常に関数の直接使用者を指す.例は以下の通りです直接呼び出し、このときthisはbtnを指します.
btn.onclick = function(){
alert(this);// btn alert
}
間接的に呼び出して、この時thisはwindowを指します.btn.onclick = function(){
pdd();// btn, pdd()
};
function pdd(){
alert(this);// pdd() , window alert
};
3.newの後はコンストラクションで、コンストラクタの中のthisは現在のオブジェクトを指します.function Pdd(name,sex,grade){
this.name = name;
this.sex = sex;
this.grade = grade;
this.SayHello = function(){
alert(" ,"+this.name);// this Pdd()
}
}
var obj1 = new Pdd(" "," ","80");
obj1.SayHello();
二、thisの方向を変える方法apply、call、bind1.appyappy()メソッドは他のオブジェクトをハイジャックする方法で、他のオブジェクトの属性を継承します.この方法は2つのパラメータを受信して呼び出します.最初のパラメータはfunctionクラスのthisオブジェクトの代わりになり、2番目のオブジェクトは配列であり、パラメータとしてfunctionに伝えられます.
var a = 30;
var obj = {
name:" ",
a:70
}
function fn(b,c){
console.log(this.a+b+c);// this window, 35
}
fn.apply(obj,[2,3]);//this obj, fn(), 75
2.call call()メソッドは、appy()メソッドと同じで、パラメータリストが異なるだけで、call()は1つ以上のパラメータを受信して呼び出します.var a = 30;
var obj = {
name:" ",
a:70
}
function fn(b,c){
console.log(this.a+b+c);// this window, 35
}
fn.call(obj,2,3);//this obj, fn(), 75
3.bind bind()方法は、結合関数と呼ばれる新しい関数を作成します.this環境で呼び出します.この方法は2つのパラメータに入ることができ、1つ目のパラメータはthis、2つ目以降のパラメータは関数のパラメータとして呼び出されます.var a = 30;
var obj = {
name:" ",
a:70
}
function fn(b,c){
console.log(this.a+b+c);// this window
}
var f = fn.bind(obj,2,3);//this obj
f();// 75
まとめ:1:イベントでは、thisは、このイベントをトリガするオブジェクトを指します.2:thisは常に関数の直接的な使用者を指します.3:コンストラクタのthisは、現在のオブジェクトを指します.