JavaScript中的this實(shí)例分析
更新時(shí)間：2011年04月28日 00:49:57 作者：
做web開(kāi)發(fā)幾年，也認(rèn)為自己的js寫(xiě)了不少，可真正去解釋這個(gè)東西的時(shí)候，才發(fā)現(xiàn)不是這么簡(jiǎn)單，花了一些時(shí)間，寫(xiě)了幾個(gè)小demo，讓我們來(lái)一探究竟。
以人為鏡，可知得失，看來(lái)這句話是很有道理的。
Demo 1 ：
如果是一個(gè)全局的function，則this相當(dāng)于window對(duì)象，在function里定義的各種屬性或者方法可以在function外部訪問(wèn)到，前提是這個(gè)function需要被調(diào)用。
<script type="text/javascript">
//在function中使用this
function a() {
if (this == window) {
alert("this == window");
this.fieldA = "I'm a field";
this.methodA = function() {
alert("I'm a function ");
}
}
}
a(); //如果不調(diào)用a方法，則里面定義的屬性會(huì)取不到
alert(window.fieldA);
methodA();
</script>
Demo 2 ：
如果使用new的方式去實(shí)例化一個(gè)對(duì)象，則this不等于window對(duì)象，this指向function a的實(shí)例
<script type="text/javascript">
//在function中使用this之二
function a() {
if (this == window) {
alert("this == window");
}
else {
alert("this != window");
}
this.fieldA = "I'm a field";
}
var b = new a();
alert(b.fieldA);
</script>
Demo 3 ：
使用prototype擴(kuò)展方法可以使用this獲取到源對(duì)象的實(shí)例，私有字段無(wú)法通過(guò)原型鏈獲取
<script type="text/javascript">
//在function中使用this之三
function a() {
this.fieldA = "I'm a field";
var privateFieldA = "I'm a var";
}
a.prototype.ExtendMethod = function(str) {
alert(str + " : " + this.fieldA);
alert(privateFieldA); //出錯(cuò)
};
var b = new a();
b.ExtendMethod("From prototype");
</script>
Demo 4 ：
不管是直接引用function，還是實(shí)例化一個(gè)function，其返回的閉包函數(shù)里的this都是指向window
<script type="text/javascript">
//在function中使用this之四
function a() {
alert(this == window);
var that = this;
var func = function() {
alert(this == window);
alert(that);
};
return func;
}
var b = a();
b();
var c = new a();
c();
</script>
Demo 5 ：
在HTML中使用this，一般代表該元素本身
<div onclick="test(this)" id="div">Click Me</div>
<script type="text/javascript">
function test(obj) {
alert(obj);
}
</script>
Demo 6 :
在IE和火狐（Chrome）下注冊(cè)事件，this分別指向window和元素本身
<div id="div">Click Me</div>
<script type="text/javascript">
var div = document.getElementById("div");
if (div.attachEvent) {
div.attachEvent("onclick", function() {
alert(this == window);
var e = event;
alert(e.srcElement == this);
});
}
if (div.addEventListener) {
div.addEventListener("click", function(e) {
alert(this == window);
e = e;
alert(e.target == this);
}, false);
}
</script>
以上就是我總結(jié)的this在javascript中的不同應(yīng)用場(chǎng)景，可能還有其他的情況不一而足，以后發(fā)現(xiàn)了會(huì)補(bǔ)充進(jìn)來(lái)。
Demo 1 ：
如果是一個(gè)全局的function，則this相當(dāng)于window對(duì)象，在function里定義的各種屬性或者方法可以在function外部訪問(wèn)到，前提是這個(gè)function需要被調(diào)用。
復(fù)制代碼 代碼如下:
<script type="text/javascript">
//在function中使用this
function a() {
if (this == window) {
alert("this == window");
this.fieldA = "I'm a field";
this.methodA = function() {
alert("I'm a function ");
}
}
}
a(); //如果不調(diào)用a方法，則里面定義的屬性會(huì)取不到
alert(window.fieldA);
methodA();
</script>
Demo 2 ：
如果使用new的方式去實(shí)例化一個(gè)對(duì)象，則this不等于window對(duì)象，this指向function a的實(shí)例
復(fù)制代碼 代碼如下:
<script type="text/javascript">
//在function中使用this之二
function a() {
if (this == window) {
alert("this == window");
}
else {
alert("this != window");
}
this.fieldA = "I'm a field";
}
var b = new a();
alert(b.fieldA);
</script>
Demo 3 ：
使用prototype擴(kuò)展方法可以使用this獲取到源對(duì)象的實(shí)例，私有字段無(wú)法通過(guò)原型鏈獲取
復(fù)制代碼 代碼如下:
<script type="text/javascript">
//在function中使用this之三
function a() {
this.fieldA = "I'm a field";
var privateFieldA = "I'm a var";
}
a.prototype.ExtendMethod = function(str) {
alert(str + " : " + this.fieldA);
alert(privateFieldA); //出錯(cuò)
};
var b = new a();
b.ExtendMethod("From prototype");
</script>
Demo 4 ：
不管是直接引用function，還是實(shí)例化一個(gè)function，其返回的閉包函數(shù)里的this都是指向window
復(fù)制代碼 代碼如下:
<script type="text/javascript">
//在function中使用this之四
function a() {
alert(this == window);
var that = this;
var func = function() {
alert(this == window);
alert(that);
};
return func;
}
var b = a();
b();
var c = new a();
c();
</script>
Demo 5 ：
在HTML中使用this，一般代表該元素本身
復(fù)制代碼 代碼如下:
<div onclick="test(this)" id="div">Click Me</div>
<script type="text/javascript">
function test(obj) {
alert(obj);
}
</script>
Demo 6 :
在IE和火狐（Chrome）下注冊(cè)事件，this分別指向window和元素本身
復(fù)制代碼 代碼如下:
<div id="div">Click Me</div>
<script type="text/javascript">
var div = document.getElementById("div");
if (div.attachEvent) {
div.attachEvent("onclick", function() {
alert(this == window);
var e = event;
alert(e.srcElement == this);
});
}
if (div.addEventListener) {
div.addEventListener("click", function(e) {
alert(this == window);
e = e;
alert(e.target == this);
}, false);
}
</script>
以上就是我總結(jié)的this在javascript中的不同應(yīng)用場(chǎng)景，可能還有其他的情況不一而足，以后發(fā)現(xiàn)了會(huì)補(bǔ)充進(jìn)來(lái)。
您可能感興趣的文章:
- JS函數(shù)this的用法實(shí)例分析
- JS和jQuery通過(guò)this獲取html標(biāo)簽中的屬性值(實(shí)例代碼)
- javascript中this用法實(shí)例詳解
- js中this用法實(shí)例詳解
- javascript下動(dòng)態(tài)this與動(dòng)態(tài)綁定實(shí)例代碼
- javascript與jquery中的this關(guān)鍵字用法實(shí)例分析
- js中this的用法實(shí)例分析
- JavaScript中的this關(guān)鍵字介紹與使用實(shí)例
- JS作用域閉包、預(yù)解釋和this關(guān)鍵字綜合實(shí)例解析
- JavaScript中this的全面解析及常見(jiàn)實(shí)例
相關(guān)文章
javascript算法學(xué)習(xí)實(shí)現(xiàn)代碼
有1到100000共10萬(wàn)個(gè)數(shù)。從中隨機(jī)抽走兩個(gè)。再把原來(lái)的數(shù)字順序打亂。如何快速找到被抽走的兩個(gè)數(shù)2011-04-04
我們?cè)趯?xiě)CSS的時(shí)候，會(huì)遇到大量相同的屬性(比如：margin-top:10px)這種屬性幾乎每個(gè)vue頁(yè)面都有。這個(gè)時(shí)候，我們可以把css掛載到全局上，供所有vue頁(yè)面使用，同時(shí)也方便修改。感興趣的同學(xué)可以參考一下2023-04-04
原生JavaScript實(shí)現(xiàn)的簡(jiǎn)單省市縣三級(jí)聯(lián)動(dòng)功能示例
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)的簡(jiǎn)單省市縣三級(jí)聯(lián)動(dòng)功能,結(jié)合完整實(shí)例形式分析了javascript聯(lián)動(dòng)菜單的實(shí)現(xiàn)方法,涉及javascript事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
JavaScript如何監(jiān)測(cè)數(shù)組的變化
最近在造輪子的時(shí)候遇到了這么一個(gè)問(wèn)題,那就是數(shù)組在調(diào)用內(nèi)部方法的時(shí)候怎么才可以監(jiān)聽(tīng)到數(shù)組發(fā)生了變化,這篇文章主要給大家介紹了關(guān)于JavaScript如何監(jiān)測(cè)數(shù)組變化的相關(guān)資料,需要的朋友可以參考下2021-07-07
JavaScript分析、壓縮工具JavaScript Analyser
這篇文章主要介紹了JavaScript分析、壓縮工具JavaScript Analyser,需要的朋友可以參考下2014-12-12
js計(jì)算兩個(gè)時(shí)間差 天 時(shí) 分 秒 毫秒的代碼
這篇文章主要介紹了js計(jì)算兩個(gè)時(shí)間差 天 時(shí) 分 秒 毫秒的實(shí)例代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
ECMAScript5中的對(duì)象存取器屬性：getter和setter介紹
這篇文章主要介紹了ECMAScript5中的對(duì)象屬性存取器：getter和setter介紹,事實(shí)上在除ie外最新主流瀏覽器的實(shí)現(xiàn)中,任何一個(gè)對(duì)象的鍵值都可以被getter和setter方法所取代,這被稱之為“存取器屬性”,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了微信小程序文件下載視頻和圖片，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue-router路由懶加載的實(shí)現(xiàn)（解決vue項(xiàng)目首次加載慢）
這篇文章主要介紹了vue-router路由懶加載的實(shí)現(xiàn)（解決vue項(xiàng)目首次加載慢），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
解決layui的使用以及針對(duì)select、radio等表單組件不顯示的問(wèn)題
今天小編就為大家分享一篇解決layui的使用以及針對(duì)select、radio等表單組件不顯示的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09