javascriptにおけるthisの指向について

2119 ワード

javascriptの中でthisの指す理解に対して簡単に書いて、またどのように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、bind
1.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は、現在のオブジェクトを指します.