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>

實例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>

實例3：第三種調(diào)用this的方法——以構造器的方式調(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>

說明：
（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)建，也可以通過構造函數(shù)來創(chuàng)建；
（4）什么是構造函數(shù)：當一個普通函數(shù)以“new 函數(shù)名()”的方式調(diào)用時，此函數(shù)就充當構造函數(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結果為hi

 }else{// ie

  hi.attachEvent('onclick',function(){alert(this.id)});//ie8及ie8以下，這里this指向全局對象window。結果this.id結果為undefined

 }

}

</script>

</head>

<body>

<p id="hi">hello world</p>

</body>

</html>