js中this的用法實例分析
更新時間：2015年01月10日 16:21:21 投稿：shichen2014
這篇文章主要介紹了js中this的用法,實例分析了js中this的4種常見用法,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例分析了js中this的用法。分享給大家供大家參考。具體分析如下：
實例1：第一種調(diào)用this的方法——以函數(shù)形式調(diào)用。它代表全局對象window
復制代碼 代碼如下:
<script type="text/javascript">
function t(){
alert(this);//這里this表示window對象。
}
t();
</script>
function t(){
alert(this);//這里this表示window對象。
}
t();
</script>
實例2：第二種調(diào)用this的方法——以對象屬性的形式調(diào)用。它代表該對象。實例中onclick為p元素對象的屬性
復制代碼 代碼如下:
<html>
<head>
<script type="text/javascript">
function t(){
alert(this);
this.style.background = 'green';
}
window.onload = function(){
document.getElementById('eng').onclick = t;
}
</script>
</head>
<body>
<p id="eng">abcd</p>
</body>
</html>
<head>
<script type="text/javascript">
function t(){
alert(this);
this.style.background = 'green';
}
window.onload = function(){
document.getElementById('eng').onclick = t;
}
</script>
</head>
<body>
<p id="eng">abcd</p>
</body>
</html>
實例3：第三種調(diào)用this的方法——以構(gòu)造器的方式調(diào)用。
復制代碼 代碼如下:
<script type="text/javascript">
function dog(){
this.legs = 4;
this.bark = function(){
alert("汪汪...");
}
}
var wangcai = new dog();//創(chuàng)建對象的方式。new 函數(shù)名();
wangcai.bark();
</script>
function dog(){
this.legs = 4;
this.bark = function(){
alert("汪汪...");
}
}
var wangcai = new dog();//創(chuàng)建對象的方式。new 函數(shù)名();
wangcai.bark();
</script>
說明：
（1）如果直接調(diào)用dog()函數(shù)，而不是以創(chuàng)建對象的方式調(diào)用，則相當于第一種調(diào)用了，即this代表著全局對象window。
（2）js中沒有類的概念，但是有對象的概念；
（3）對象的創(chuàng)建可以采用var = objName{name:'abc',age:40}這種方式創(chuàng)建，也可以通過構(gòu)造函數(shù)來創(chuàng)建；
（4）什么是構(gòu)造函數(shù)：當一個普通函數(shù)以“new 函數(shù)名()”的方式調(diào)用時，此函數(shù)就充當構(gòu)造函數(shù)。
實例4：第四種調(diào)用this的方法——call和apply方式
復制代碼 代碼如下:
<html>
<head>
<script type="text/javascript">
window.onload = function(){
var d = document.getElementById('hi');
if(hi.addEventListener){//chrome 和 firefox
hi.addEventListener('click',function(){alert(this.id)},false);//w3c模型中，this指向DOM對象。this.id結(jié)果為hi
}else{// ie
hi.attachEvent('onclick',function(){alert(this.id)});//ie8及ie8以下，這里this指向全局對象window。結(jié)果this.id結(jié)果為undefined
}
}
</script>
</head>
<body>
<p id="hi">hello world</p>
</body>
</html>
<head>
<script type="text/javascript">
window.onload = function(){
var d = document.getElementById('hi');
if(hi.addEventListener){//chrome 和 firefox
hi.addEventListener('click',function(){alert(this.id)},false);//w3c模型中，this指向DOM對象。this.id結(jié)果為hi
}else{// ie
hi.attachEvent('onclick',function(){alert(this.id)});//ie8及ie8以下，這里this指向全局對象window。結(jié)果this.id結(jié)果為undefined
}
}
</script>
</head>
<body>
<p id="hi">hello world</p>
</body>
</html>
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
淺析JavaScript中的平穩(wěn)退化（graceful degradation）
所謂平穩(wěn)退化，就是指可以讓訪問者在瀏覽器不支持javascript或者禁用了JavaScript的時候依舊可以順利的瀏覽你的網(wǎng)頁，下文給大家簡單介紹了js中的平穩(wěn)退化，感興趣的朋友一起看看吧2017-07-07
本文主要介紹了canvas繪制環(huán)形進度條的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
echarts多條折線圖動態(tài)分層的實現(xiàn)方法
這篇文章主要介紹了echarts多條折線圖動態(tài)分層的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
Mysql內(nèi)儲存JSON字符串根據(jù)條件進行查詢
本文主要介紹了Mysql內(nèi)儲存JSON字符串根據(jù)條件進行查詢，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要為大家詳細介紹了JavaScript模板引擎Template.js使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家介紹了前端開發(fā)TypeScript的入門基礎教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-02-02
JavaScript如何將base64圖片轉(zhuǎn)化為URL格式
這篇文章主要給大家介紹了關于JavaScript如何將base64圖片轉(zhuǎn)化為URL格式的相關資料,Base64是一種編碼方式,而不是真正的加密方式,即使算Base64也僅用作一個簡單的加密來保護某些數(shù)據(jù),而真正的加密通常都比較繁瑣,需要的朋友可以參考下2023-07-07
通用的javascript 換行色換列色的小js...2007-04-04
動態(tài)生成方法的例子，這些方法在新對象實例化的時候創(chuàng)建2009-07-07
Bootstrap datepicker日期選擇器插件使用詳解
這篇文章主要為大家詳細介紹了Bootstrap datepicker日期選擇器插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07