DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 通俗易懂------this指向
通俗易懂------this指向
編輯:JavaScript基礎知識     

因為JavaScript 中this 是在運行期進行綁定的,因此JavaScript 中this 關鍵字具備多重含義。

具體在實際應用中,this的指向大致可以分為下面4種。

  1. 作為對象的方法調用   obj.a()
  2. 作為普通函數調用    a()
  3. 構造函數調用        var b = new a(); 
  4. function.prototype.call或function.prototype.apply調用

作為對象的方法調用 和 作為普通函數調用

 window.a = 2;
 var obj = {
     a:1,
     getA:function(){
         console.log(this.a);
     }
 }
 obj.getA();       //輸出1,作為對象的方法調用,this指向當前對象
 var x = obj.getA;
 x();   //輸出2,作為普通函數調用,this全部指向window對象。 

注意,不管x之前是obj.getA,還是其他某個對象的屬性,只要最後是以x(),fun()這種方式調用的,均視為普通函數調用,此時this指向window對象

但是,在ECMAScript5的strict模式下,作為函數調用的 this被規定不會指向全局對象

 window.a = 2;
 var obj = {
     a:1,
     getA:function(){
         "use strict"
         console.log(this.a);
     }
 }
 var x = obj.getA;
 x();   //underfined

作為構造函數調用

通常情況下,構造函數裡的this指向返回的這個對象,但是如果構造器顯示地返回了一個object類型的對象,則this指向這個返回的object對象
 var Myclass = function(){
     this.name = 'beidan';
 }
 var obj = new Myclass();  
 console.log(obj.name);//beidan
  
 var Myclass = function(){
     this.name = 'beidan';
     return{         //顯示的返回一個對象,注意!既要是顯示,即有return,也要是對象{}
         name:'test'
     }
 }
 var obj = new Myclass();
 console.log(obj.name);//test

作為function.prototype.call或function.prototype.apply調用

 

  • 理解call,apply

 

call,apply都是為了改變函數體內部 this 的指向。例如,fun1.call()或者fun1.apply() 都是為了改變fun1函數內部的this指向。

二者的作用完全一樣,只是接受參數的方式不太一樣。

func1.call(this, arg1, arg2);        //參數列表arg1,arg2 func1.apply(this, [arg1, arg2]);   //參數數組 [arg1,arg2]   第一個參數指定那個了函數體內this對象的指向,他可以任何一個 JavaScript 對象(JavaScript 中一切皆對象),如果為null,則函數體內的this會指向默認的宿主對象,在浏覽器中則是window。   第二個參數,call 需要把參數按順序傳遞進去,而 apply 則是把參數放在數組裡。 當你的參數不確定數量時用 apply ,然後把參數 push 進數組傳遞進去。或者也可以通過 arguments來獲取所有的參數。這樣看來,apply的使用率更高。  
  • call,apply的用途

 

1.修正this的指向 比如,在實際開發中,會出現以下這種問題
 document.getElementById('div1').onclick = function(){
     console.log(this.id);   //div1
     var func = function(){
         console.log(this.id);    
     }
     func();   //通過普通函數調用,this指向window,輸出undefined
 }
這時我們可以用call來修正func 函數內this的指向。
 document.getElementById('div1').onclick = function(){
     console.log(this.id);   //div1
     var func = function(){
         console.log(this.id);
     }
     func.call(this);   //使用call,使func函數內部的this指向當前的函數對象,輸出div1
 }

2.模擬繼承(借用其他對象的方法)

  • 例子一:其他對象(banana)借用apple中的say方法
 function fruits() {}
 fruits.prototype = {
     color: "red",
     say: function() {
         console.log("My color is "+ this.color);
     }
 }
 var apple = new fruits;
 apple.say();    //My color is red
但是,如果我們還有其它 2個對象 banana= {color : "yellow"} ,orange = {color:‘orange’},想使用say方法,但是又不想對它們重新定義say方法。 那麼,我們可以用apply或者call 借用 fruit裡面的say方法
 banana = {
     color: "yellow"
 };
 orange = {color:‘orange’};
 apple.say.call(banana);     //My color is yellow
 apple.say.apply(orange );    //My color is orange
也就是說,當一個 object 沒有某個方法(本例子中banana沒有say方法),但是其他的有(本例子中apple有say方法),我們可以借助call或apply用其它對象的方法來操作。 再看幾個例子鞏固記憶
  • 例子二:獲取數組中的最大值和最小值
 var numbers = [5, 458 , 120 , -215 ];
 var maxInNumbers = Math.max.apply(Math, numbers),   //458
     maxNumbers = Math.max.call(Math,5, 458 , 120 , -215, 666); //666
number 本身沒有 max 方法,但是 Math 有,我們就可以借助 call 或者 apply 使用其方法。

 

以上就是this在JavaScript中不同情況下的指向。

周末來了,博主又要出去浪了o(∩_∩)o 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved