javascript中的self和this用法小結
一、 起因
那天用到prototype.js于是打開看看，才看幾行就滿頭霧水，原因是對js的面向?qū)ο蟛皇呛苁煜?，于是百?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后就會執(zhí)行initialize方法？
尋找答案：
二、 Js的面向?qū)ο?
initialize是什么?
只不過是個變量，代表一個方法，用途是類的構造函數(shù)。
其具體功能靠js的面向?qū)ο笾С?，那么js的面向?qū)ο笫鞘裁礃幼拥哪?？和java 的有什么相同與不同？
看代碼：
代碼如下:
var ClassName = function(v){
this.value=v;
this.getValue=function(){
return this.value;
}
this.setValue=function(v){
this.value=v;
}
}
那么JS中的函數(shù)和類有什么不同呢？
其實是一樣的，ClassName就是一個函數(shù)，當出現(xiàn)在new后面的時候就作為一個構造函數(shù)來構造對象。
如
代碼如下:
var objectName1 = new ClassName(“a”);//得到一個對象
其中objectName1就是執(zhí)行ClassName構造函數(shù)后得到的對象，而在ClassName函數(shù)中的this指的就是new之后構造出來的對象，所以objectName1會后一個屬性和兩個方法?？梢酝ㄟ^這樣來調(diào)用他們：
代碼如下:
objectName1.setValue(''hello'');
alert(objectName1.getValue());//對話框hello
alert(objectName1.value) ;//對話框hello
那么
代碼如下:
var objectName2 = ClassName(“b”);//得到一個對象
這樣objectName2得到的是什么呢？顯然是方法的返回值，這里ClassName只作為了一個普通的函數(shù)（雖然首字母大寫了）。但是在之前寫的ClassName中并沒有返回值，所以objectName2會是undifinded那么“b”賦給誰了呢？在這并沒有產(chǎn)生一個對象，而只是單純的執(zhí)行這個方法，所以這個“b”賦值給了調(diào)用這個方法的對象window，證據(jù)如下：
var objectName2 = ClassName(“b”);//得到一個對象
alert(window.value)；//對話框b
所以JS中的所有function都是一樣的，但是用途可能是不同的（用作構造對象抑或是執(zhí)行一個過程）。
下面該回到主題了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);
}
并且后面這個方法是用來做構造函數(shù)的。當使用這個構造函數(shù)來構造對象的時候，會讓構造出來的這個對象的initialize變量執(zhí)行apply()方法，apply()的用途后面在說，繼續(xù)說initialize。這樣在初始化對象的時候會聯(lián)系到initialize（怎么聯(lián)系就要看apply的了）。
那么
代碼如下:
A.prototype={
initialize:function(v){
this .value=v;
}
showValue:function(){
alert(this.value);
}
}
是什么意思呢？
Prototype是“原型”的意思。A是一個function（），那么A. prototype，就是function中的一個變量，其實是個對象。這個對象擁有什么方法，那么function產(chǎn)生的對象就擁有什么方法，故
var a = new A(‘helloWord!');
a. showValue();//彈出對話框helloWord！
所以a對象也會有initialize方法，不只如此，每一個有A構造出來的對象都會有一個initialize方法，而在前面說過，構造的時候會調(diào)用構造函數(shù)，構造函數(shù)里面會讓initialize去調(diào)用apply方法，于是在new A(‘helloWord!')的時候initialize回去調(diào)用apply方法。這也就是調(diào)用了一個初始化的方法。
三、 call()和apply()
下面開始研究apply()，在網(wǎng)上找了幾個資料，并結合自己的研究，了解了call()和apply()的功能。功能基本一樣，function().call(object,{},{}……)或者function().apply (object,[……])的功能就是對象object調(diào)用這里的funciton()，不同之處是call參數(shù)從第二個開始都是傳遞給funciton的，可以依次羅列用“，”隔開。而apply只有兩個參數(shù)，第二個是一個數(shù)組，其中存儲了所有傳遞給function的參數(shù)。
this.initialize.apply(this , arguments);
是什么意思？
這里的第一個this，是指用new調(diào)用構造函數(shù)之后生成的對象，也就是前面的a，那么第二個this也當然應該是指同一個對象。那這句話就是this（也就是a）調(diào)用initialize方法，參數(shù)是arguments對象（參數(shù)的數(shù)組對象），所以在構造函數(shù)執(zhí)行的時候，對象a就會去執(zhí)行initialize方法來初始化，這樣就和單詞“initialize”的意思對上了。
那么執(zhí)行initialize方法的參數(shù)怎么傳遞進去的呢？
四、 Arguments對象
這段代碼能說明一切了：
代碼如下:
function test(){
alert(typeof arguments);
for(var i=0; i<arguments.length; i++){
alert(arguments[i]);
}
}
test("1","2","3");
test("a","b");
執(zhí)行后alert(typeof arguments);會顯示object，說明arguments是對象。然后會依次打出1、2、3。說明arguments就是調(diào)用函數(shù)的實參數(shù)組。
代碼如下:
var Class = {
create: function() {
return function() {
this.initialize.apply(this , arguments);
}
}
}
arguments 就是create返回的構造函數(shù)的實參數(shù)組，那么在
var a = new A(‘helloWord!');
的時候‘helloWord!'就是實參數(shù)組（雖然只有一個字符串），傳遞給方法apply，然后在調(diào)用initialize 的時候作為參數(shù)傳遞給初始化函數(shù)initialize。
相關文章
這篇文章主要帶領大家學習JavaScript設計模式，其中重點介紹策略模式，以年終獎為實例對策略模式進行分析，對策略模式進行詳細剖析，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了微信小程序 配置頂部導航條標題顏色的實現(xiàn)方法的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了JS簡單實現(xiàn)移動端日歷功能的方法,涉及javascript針對日期與時間的操作及顯示相關技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了js檢測數(shù)組類型的方法小結,有instanceof方法Array.isArray() 方法和Object.prototype.toString.call()方法，都是比較常用的，需要的朋友可以參考下2017-03-03
這篇文章主要介紹了JavaScript事件對象event用法,結合實例形式分析了事件對象event中常用的屬性、方法、相關操作技巧與注意事項,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Javascript中的apply()方法淺析,本文講解了apply vs call、Javascript apply 方法等內(nèi)容,需要的朋友可以參考下2015-03-03
在javascript的函數(shù)中，除了聲明時定義的形參之外，每個函數(shù)還可以接收兩個附加的參數(shù)：this和arguments。這里就講一下this的作用以及不同場景下它的不同指向。2016-10-10
本文主要介紹了JavaScript下載后端返回的文件流的三種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
本篇文章教給大家用JS代碼配合CSS樣式來實現(xiàn)滾動時鐘的動畫效果，一起來學習下。2017-12-12
我們在學習JavaScript中,難免都會去網(wǎng)上查一些資料,也許偶爾就會遇到“事件委托”,但是,大多數(shù)時說的是“事件綁定”,對于“事件委托”,或是不提,或是淺嘗輒止,對于我這個比較好奇的人來說,實在很頭疼,尤其是想更多的了解“事件委托”的時候2015-06-06