javascript的this
this
javascript的this
總是指向一個物件,而具體指向哪個物件實在執行時基於函式的執行環境動態繫結的,而非函式被宣告時的環境
實際應用中,this
的指向大概分為以下四種
1.作為物件的方法呼叫
2.作為普通函式呼叫
3.構造器呼叫
4.
Function.prototype.call
或者Function.prototype.apply
呼叫
1.作為物件的方法呼叫,this
指向該物件
var obj={
a:1,
getA:function(){
console.debug(this===obj);//輸出true
console.debug(this.a);//1
}
};
obj.getA();
2.作為普通函式呼叫當函式,這個全域性物件是window
物件
window.name='globalName';
var getName=function(){
return this.name;
}
console.debug(getName());
或者
window.name='gloabalName';
var myObject={
name:'seven',
getName:function(){
return this.name;
}
};
var getName=myObject.getName;
console.debug(getName());
區域性callback
方法,用一個變數儲存div
節點的引用;
window.id='window';
document.getElementById('div1').onclick=function(){
console.debug(this.id);//輸出div1
var callback=function(){
console.debug(this.id);//輸出window
}
callback();
};
解決方案為:用一個變數儲存div
節點的引用
window.id='window';
document.getElementById('div1').onclick=function(){
console.debug(this.id);//輸出div1
var that=this;
var callback=function(){
console.debug(that.id);//輸出div1
}
callback();
};
3.建構函式跟普通函式一模一樣,它們的區別在於被呼叫的方式
當用new運算子呼叫函式的時候,該函式總會返回一個物件,通常情況下構造器裡面的this就指返回的這個物件
如程式碼
var MyClass=function(){
this.name='seven';
}
var obj=new MyClass();
console.debug(obj.name);//輸出seven
但是,使用new
呼叫建構函式時,還要注意一個問題,如果構造器顯式的返回了一個object
型別的物件,那麼此次運算結果最終會返回這個物件
var MyClass=function(){
this.name='seven';
return{
name:'anne'
}
};
var obj=new MyClass();
console.debug(obj.name);//輸出anne
如果構造器不顯式地返回任何資料,或者是返回一個非物件型別的資料,就不會造成上述問題
var MyClass=function(){
this.name='seven';
return 'anne'
};
var obj=new MyClass();
console.debug(obj.name);//輸出sve
4.Function.prototype.call
和Function.prototype.apply
可以動態地改變傳入函式的this
:
var obj1={
name:'sven',
getName:function(){
return this.name;
}
};
var obj2={
name:'anne'
};
console.log(obj1.getName());//輸出sven;
console.log(obj2.getName.call(obj2));//輸出anne;
相關文章
- javascript,還是javascript的問題JavaScript
- JavaScript的this的指向JavaScript
- JavaScript中的thisJavaScript
- javascript的this原理JavaScript
- JavaScript 的 this 原理JavaScript
- javascript 下的 thisJavaScript
- JavaScript 中的 this !JavaScript
- JavaScript 中的 !!JavaScript
- 高效的 JavaScriptJavaScript
- Javascript 的 this 用法JavaScript
- JavaScript 是如何工作的:JavaScript 的記憶體模型JavaScript記憶體模型
- JavaScript JavaScript與XML——“XPath”的注意要點JavaScriptXML
- javascript的match方法JavaScript
- JavaScript 中的 exportJavaScriptExport
- 理解 JavaScript 中的 thisJavaScript
- JavaScript 中 This 的指向JavaScript
- 解析javascript中的thisJavaScript
- JavaScript中的 FunctionJavaScriptFunction
- JavaScript內的this指向JavaScript
- JavaScript 內的 this 指向JavaScript
- JavaScript reduce()的使用JavaScript
- JavaScript的起源故事JavaScript
- Javascript中的魔鬼JavaScript
- javaScript的變數JavaScript變數
- JavaScript的前世今生JavaScript
- JavaScript 的閉包JavaScript
- JavaScript的理解01JavaScript
- javascript中的字典JavaScript
- 靈活的JavaScriptJavaScript
- JavaScript的MonadJavaScript
- JavaScript 的 MVC 模式JavaScriptMVC模式
- javascript的本地操作JavaScript
- JavaScript中的AJAXJavaScript
- javascript DOM的操作JavaScript
- JavaScript的同源策略JavaScript
- Javascript中的deleteJavaScriptdelete
- JavaScript的繼承JavaScript繼承
- javascript中的symbolJavaScriptSymbol