萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> javascript中的self和this用法小結

javascript中的self和this用法小結

 本篇文章主要是對javascript中的self和this用法進行了詳細的總結介紹,需要的朋友可以過來參考下,希望對大家有所幫助

一、 起因  那天用到prototype.js於是打開看看,才看幾行就滿頭霧水,原因是對js的面向對象不是很熟悉,於是百度+google了一把,最後終於算小有收獲,寫此紀念一下^_^。  prototype.js代碼片段   代碼如下: var Class = {      create: function() {          return function() {              this.initialize.apply(this , arguments);          }      }  }  // Class使用方法如下 var A = Class.create();  A. prototype={      initialize:function(v){          this .value=v;      }      showValue:function(){          alert(this.value);      }  }  var a = new A(‘helloWord!');  a. showValue();//彈出對話框helloWord!   l initialize是什麼?  l apply方法是干什麼的?  l arguments變量呢?  l 為什麼new A後就會執行initialize方法?  尋找答案:   二、 Js的面向對象  initialize是什麼?  只不過是個變量,代表一個方法,用途是類的構造函數。  其具體功能靠js的面向對象支持,那麼js的面向對象是什麼樣子的那?和java 的有什麼相同與不同?  看代碼:   代碼如下:     復制代碼 代碼如下: var ClassName = function(v){      this.value=v;      this.getValue=function(){          return this.value;      }      this.setValue=function(v){          this.value=v;      }  }   那麼JS中的函數和類有什麼不同呢?  其實是一樣的,ClassName就是一個函數,當出現在new後面的時候就作為一個構造函數來構造對象。  如   代碼如下: var objectName1 = new ClassName(“a”);//得到一個對象   其中objectName1就是執行ClassName構造函數後得到的對象,而在ClassName函數中的this指的就是new之後構造出來的對象,所以objectName1會後一個屬性和兩個方法。可以通過這樣來調用他們:   代碼如下: objectName1.setValue(''hello'');  alert(objectName1.getValue());//對話框hello  alert(objectName1.value) ;//對話框hello   那麼   代碼如下: var objectName2 = ClassName(“b”);//得到一個對象   這樣objectName2得到的是什麼呢?顯然是方法的返回值,這裡ClassName只作為了一個普通的函數(雖然首字母大寫了)。但是在之前寫的ClassName中並沒有返回值,所以objectName2會是undifinded那麼“b”賦給誰了呢?在這並沒有產生一個對象,而只是單純的執行這個方法,所以這個“b”賦值給了調用這個方法的對象window,證據如下:  var objectName2 = ClassName(“b”);//得到一個對象  alert(window.value);//對話框b  所以JS中的所有function都是一樣的,但是用途可能是不同的(用作構造對象抑或是執行一個過程)。  下面該回到主題了initialize是干什麼的?   代碼如下:    代碼如下: var Class = {      create: function() {          return function() {              this.initialize.apply(this , arguments);          }      }  }  var A = Class.create();   這段代碼是構造個一個function復制給A,這個function是   代碼如下:    代碼如下: function() {      this.initialize.apply(this , arguments);  }   並且後面這個方法是用來做構造函數的。當使用這個構造函數來構造對象的時候,會讓構造出來的這個對象的initialize變量執行apply()方法,apply()的用途後面在說,繼續說initialize。這樣在初始化對象的時候會聯系到initialize(怎麼聯系就要看apply的了)。  那麼   代碼如下:    代碼如下: A.prototype={      initialize:function(v){          this .value=v;      }      showValue:function(){          alert(this.value);      }  }   是什麼意思呢?  Prototype是“原型”的意思。A是一個function(),那麼A. prototype,就是function中的一個變量,其實是個對象。這個對象擁有什麼方法,那麼function產生的對象就擁有什麼方法,故  var a = new A(‘helloWord!');  a. showValue();//彈出對話框helloWord! 所以a對象也會有initialize方法,不只如此,每一個有A構造出來的對象都會有一個initialize方法,而在前面說過,構造的時候會調用構造函數,構造函數裡面會讓initialize去調用apply方法,於是在new A(‘helloWord!')的時候initialize回去調用apply方法。這也就是調用了一個初始化的方法。   三、 call()和apply()  下面開始研究apply(),在網上找了幾個資料,並結合自己的研究,了解了call()和apply()的功能。功能基本一樣,function().call(object,{},{}……)或者function().apply (object,[……])的功能就是對象object調用這裡的funciton(),不同之處是call參數從第二個開始都是傳遞給funciton的,可以依次羅列用“,”隔開。而apply只有兩個參數,第二個是一個數組,其中存儲了所有傳遞給function的參數。  this.initialize.apply(this , arguments);  是什麼意思?  這裡的第一個this,是指用new調用構造函數之後生成的對象,也就是前面的a,那麼第二個this也當然應該是指同一個對象。那這句話就是this(也就是a)調用initialize方法,參數是arguments對象(參數的數組對象),所以在構造函數執行的時候,對象a就會去執行initialize方法來初始化,這樣就和單詞“initialize”的意思對上了。  那麼執行initialize方法的參數怎麼傳遞進去的呢?   四、 Arguments對象  這段代碼能說明一切了:   代碼如下:    代碼如下: function test(){      alert(typeof arguments);      for(var i=0; i<arguments.length; i++){          alert(arguments[i]);      }  }  test("1","2","3");  test("a","b");   執行後alert(typeof arguments);會顯示object,說明arguments是對象。然後會依次打出1、2、3。說明arguments就是調用函數的實參數組。   代碼如下:    代碼如下: var Class = {      create: function() {          return function() {              this.initialize.apply(this , arguments);          }      }  }   arguments 就是create返回的構造函數的實參數組,那麼在  var a = new A(‘helloWord!');  的時候‘helloWord!'就是實參數組(雖然只有一個字符串),傳遞給方法apply,然後在調用initialize 的時候作為參數傳遞給初始化函數initialize。  
copyright © 萬盛學電腦網 all rights reserved