寫面向對象模式時this指向問題

this永遠指向的是所屬函數的調用對象,也就是說,this屬於某個函數,哪個對象調用了這個函數,this就指向哪個對象;對this的指向一定要注意包含this的函數被誰調用,被window調用則會指向window;

this.ele.onclick = this.move;
//move是對象的某個方法,this.ele是對象的一個屬性;
此時move方法裏的this指向的並不是對象,而是this.ele;
因爲實際在move()被調用時是this.ele在調用;
這裏相當於把move()方法的引用傳遞給了this.ele.onclick()方法了,自然move()裏的this指向的是this.ele;
所以move方法裏的this指向需要注意了
this.ele.onclick = function() {
	move();
}
//在這裏move是被window調用的,省略了前面的window,所以move裏的this指向window;

如何修改指向呢?原則是保證對象的方法中this要指向對象,方法調用是對象實例調用;
對於this.ele.onclick = this.move;的調用方法要進行包裝,用this.ele.onclick = function() {This.move();}同時必須通過賦值操作This = this;將This指向對象;如果需要用到this.ele指向的元素,則可以通過傳參數給This.move(this);來實現;
整體類似的代碼如下所示:

Tab.prototype.init = function() {
	var that = this;//把實例對象的引用傳遞給另一個變量that;
	for(var i = 0; i < this.aInput.length; i ++) {
		this.aInput[i].index = i;
		this.aInput[i].onclick = function() {
			that.change(this);
		}
	}
};
Tab.prototype.change = function(btn) {
	for(var i = 0; i < this.aInput.length; i ++ ) {
		this.aInput[i].className = '';
		this.aDiv[i].style.display = 'none';
	}
	btn.className = 'active';
	this.aDiv[btn.index].style.display = 'block';
};
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章