javascript this用法和簡單例項

admin發表於2017-02-11
JavaScript單例
作為物件導向的一門語言，javascript中的this當然具有舉足輕重的作用，合理的利用this可以將它打造成一把利器，否則它就可能反過來傷人。this是要指向一個物件的，但是在javascript中，this所指向的物件並不是固定的，而是在執行時確定的，例如某一個函式中有this關鍵字，我們就不能夠確定這個this一定是指向某個物件。下面就通過例項簡單介紹一下this用法:

一.在HTML元素屬性中直接使用this:

這種用法儘管現在已經不推薦，但是由於使用簡單，所以至今還在廣泛使用，例項程式碼如下:

[HTML] 純文字檢視 複製程式碼
<script type="text/javascript">
function a(myobject){
  alert(myobject.name)
}
</script> 
</style>
</head>
<body>
<a href="#" onClick="a(this)" name="螞蟻部落歡迎您">螞蟻部落</a>
</body>
</html>

以上程式碼當點選連結的時候能夠彈出"螞蟻部落歡迎您"，這說明這時this的指向是當前this所在的元素。

二.DHTML方式註冊處理函式時this的指向:

此種註冊事件處理函式的方式和上一個方式一樣常見，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<script type="text/javascript">
window.onload=function(){
  var mylink=document.getElementById("mylink");
  mylink.onclick=function(){
    alert(this.name);
  }
}
</script> 
</style>
</head>
<body>
<a href="#" name="螞蟻部落歡迎您" id="mylink">螞蟻部落</a>
</body>
</html>

以上程式碼實現了和方式一相同的功能，這說明this同樣是指向連結。

三.DOM方式繫結事件處理函式:

這是比較推薦的一種事件處理函式註冊方式，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<script type="text/javascript">
window.onload=function(){
  var mylink=document.getElementById("mylink");
  mylink.addEventListener("click",a);
  function a(){
    alert(this.name)
  }
}
</script> 
</style>
</head>
<body>
  <a href="#" name="螞蟻部落歡迎您" id="mylink">螞蟻部落</a>
</body>
</html>

以上程式碼同樣可以彈出“螞蟻部落歡迎您”，這說明this是指向連結a的。

四.物件(類)中使用this關鍵字:

[HTML] 純文字檢視 複製程式碼
<script type="text/javascript">
var address="全域性變數";
function Person(){
  var userName="螞蟻部落";
  this.address="青島市南區";
} 
Person();
alert(address);
</script>

以上程式碼可以彈出"青島市南區"，將程式碼稍作修改:

[HTML] 純文字檢視 複製程式碼
<script type="text/javascript">
var address="全域性變數";
function Person(){
  var userName="螞蟻部落";
  this.address="青島市南區";
} 
var operson=new Person()
alert(address);
alert(operson.address);
</script>

以上程式碼可以分別彈出"全域性變數"和"青島市南區"。

由以上幾個程式碼的表現總結如下:

this到底指向哪個物件，答案是:this指向呼叫函式的物件。那麼我們沿著此思路再回頭看以上例項：

第一個:

[HTML] 純文字檢視 複製程式碼
<a href="#" onClick="a(this)" name="螞蟻部落歡迎您">螞蟻部落</a>

大家不要誤以為是連結物件呼叫的函式a，其實是window物件呼叫的函式a，那麼為什麼this還是指向連結呢，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<script type="text/javascript">
function a(myobject)
{
  alert(myobject.name)
}</P>
<P>window.onload=function()
{
  var mylink=document.getElementById("mylink");
  mylink.onclick=function()
  {
  a(this);
  }
}
</script> 
</style>
</head>
<body>
<a href="#" onClick="a(this)" name="螞蟻部落歡迎您" id="mylink">螞蟻部落</a>
</body>
</html>

以上程式碼就比較清晰了，也就是說在元素屬性中繫結事件處理函式和等價於以上形式。在這裡函式a是由window物件呼叫的,a(this)也可以改成window.a(this)。

第二個和第三個就不用多說了，函式呼叫物件都是連結物件。

第四個可能會迷糊一些，當Person作為一個普通函式使用時，它的呼叫物件是window物件，那麼this自然指向window，那麼this.address="青島市南區"也就相當於window.address="青島市南區"，所以彈出"青島市南區"。當Person最為一個類來使用建立一個物件例項的時候，那麼this就指向那個建立的物件例項，那麼自然就會分別彈出"全域性變數"和"青島市南區"。

相關文章