前? 言

學(xué)過程序語言的都知道雹锣，我們的程序語言進(jìn)化是從“面向機(jī)器”、到“面向過程”癞蚕、再到“面向?qū)ο蟆币徊讲降陌l(fā)展而來两踏。類似于匯編語言這樣的面向機(jī)器的語言玫锋，隨著時(shí)代的發(fā)展已經(jīng)逐漸淘汰；而面向過程的語言也只有C語言老大哥依然堅(jiān)挺；現(xiàn)在主流的語言(例如Java晶姊、C++丸氛、PHP等)都是面向?qū)ο蟮恼Z言倔幼。 而我們的JavaScript語言顷蟆，恰恰介于面向過程與面向?qū)ο笾g，我們稱它為“基于對象”的語言钉凌。但是咧最，JS中的OOP依然是我們學(xué)習(xí)JS的重要一環(huán)，當(dāng)然像“繼承”“封裝”這樣的面向?qū)ο筇卣鳎际怯赡M實(shí)現(xiàn)的矢沿。今天滥搭，我們就一起來探討一下JS中的面向?qū)ο蟀桑?/p>

本章內(nèi)容將詳細(xì)介紹Android事件的具體處理及常見事件。

一咨察、面向?qū)ο蟾攀?/b>

1.1面向過程與面向?qū)ο?/b>

面向過程：專注于如何去解決一個(gè)問題的過程论熙。編程特點(diǎn)是用一個(gè)個(gè)函數(shù)去實(shí)現(xiàn)過程操作，沒有類與對象的概念摄狱；

[舉個(gè)栗子]

當(dāng)你想吃一個(gè)雞蛋灌餅的時(shí)候脓诡，面向過程的思維需要你掌握購買食材、和面媒役、烙餅祝谚、煎蛋等一系列的方法，然后按照順序一個(gè)一個(gè)方法的去執(zhí)行酣衷。

面向?qū)ο螅?/b>專注于有哪一個(gè)對象實(shí)體去解決這個(gè)問題交惯。編程特點(diǎn)是：出現(xiàn)了一個(gè)個(gè)的類，由類去生成對象穿仪。

[舉個(gè)栗子]

還是想吃雞蛋灌餅席爽，按照面向?qū)ο蟮乃季S，你需要去找一個(gè)買雞蛋灌餅的阿姨啊片，讓他給你做一個(gè)只锻。這時(shí)候，這個(gè)阿姨就是我們解決這個(gè)問題的對象紫谷。

1.2面向?qū)ο笕筇卣?/b>

繼承齐饮、封裝、多態(tài)

1.3類&對象的關(guān)系

① 類：一群有相同特征(屬性)和行為(方法)的集合笤昨。

eg： 人類 ?屬性：身高祖驱、體重、年齡 ??方法：吃飯瞒窒、說話捺僻、敲代碼

② 對象：從類中，拿出的具有確定屬性值和方法的個(gè)體崇裁；

eg： 張三 ?屬性：身高180體重180方法：說話--我叫張三

③ 類和對象的關(guān)系：

類是抽象的匕坯，對象是具體的。(類是對象的抽象化寇壳，對象是類的具體化)

通俗的來講：類是一個(gè)抽象的概念，表示具有相同屬性和行為的集合妻怎，但是類僅僅表明這類群體具有相同的屬性壳炎，但是沒有具體的屬性值。而對象是對類的屬性進(jìn)行具體賦值后，而得到的一個(gè)具體的個(gè)體匿辩；

[舉個(gè)栗子]

人類有身高腰耙、體重、年齡铲球，但是不能說人類的身高是多少挺庞。

而張三，是人類的一個(gè)具體個(gè)體稼病，身高选侨、體重都有具體值，那么張三就是人類的一個(gè)對象

二然走、JavaScript中的面向?qū)ο?/b>

2.1創(chuàng)建類和對象的步驟

① 創(chuàng)建一個(gè)類(構(gòu)造函數(shù))援制。 類名，必須要每個(gè)單詞的首字母都大寫

funtion 類名(屬性一){this.屬性=屬性一;this.方法=function(){}//this指向誰芍瑞？ -- 即將調(diào)用當(dāng)前構(gòu)造函數(shù)的對象晨仑。}

② 通過類，實(shí)例化出一個(gè)新的對象拆檬；

varobj =new類名(屬性一的Value);//原構(gòu)造函數(shù)中this洪己，指向新創(chuàng)建的obj對象；obj.方法(); 調(diào)用方法

obj.屬性; 調(diào)用屬性

2.2內(nèi)創(chuàng)建類和對象代碼示例

//① 定義一個(gè)類(構(gòu)造函數(shù))functionPerson(name,age,sex){//類的屬性this.name =name;this.age =age;this.sex =sex;//類的方法this.say =function(){

alert("我叫"+this.name+";今年"+this.age+"歲竟贯；是一個(gè)"+this.sex+"生");

}

}//從類中答捕，實(shí)例化出一個(gè)對象。并給對象的屬性賦值varzhangsan =newPerson("張三",18,"男");//zhangsan.say();varlisi =newPerson("李二狗",16,"男");//lisi.say();

三澄耍、JavaScript中的this指向問題

在上一部分中噪珊，我們創(chuàng)建了一個(gè)類，并通過這個(gè)類new出了一個(gè)對象齐莲。 但是痢站，這里面出現(xiàn)了大量的this。 很多同學(xué)就要懵逼了选酗，this不是“這個(gè)”的意思嗎阵难？為什么我在函數(shù)里面寫的this定義的屬性，最后到了函數(shù)new出的對象呢芒填？呜叫？

今天，就讓我們撥開迷霧殿衰，牢牢記住“杰小瑞this五大準(zhǔn)則”朱庆。幫你縷清關(guān)于JS中this指向的一切謎團(tuán)。

3.1誰最終調(diào)用函數(shù)闷祥，this指向誰

首先來明白this指向的基本概念娱颊，“this永遠(yuǎn)指向函數(shù)的最終調(diào)用者”，理解這句話，我們先明確三個(gè)基本要素：

①this指向的箱硕，永遠(yuǎn)只可能是對象Ｋ┲瘛！＞缯帧Ｋò荨！惠昔！

②this指向誰幕与，永遠(yuǎn)不取決于this寫在哪！舰罚！而是取決于函數(shù)在哪調(diào)用纽门。

③this指向的對象，我們稱之為函數(shù)的上下文context营罢，也叫函數(shù)的調(diào)用者

可能有同學(xué)要說了赏陵，我明確了這三個(gè)要素了，我也看不懂this的指向啊饲漾。var obj =?new function();第二部分的這句話蝙搔，怎么就讓函數(shù)(類)中的this指向obj了啊考传？一臉懵逼ing吃型。。僚楞。

那么勤晚，接下來，就讓我們祭出“杰小瑞this五大法寶”吧泉褐！記住這5條赐写，所有this指向手到擒來！

3.2※※※this指向的規(guī)律(杰小瑞this五大準(zhǔn)則)

首先膜赃，我們寫這樣的一個(gè)函數(shù)：

functionfunc(){

console.log(this);

}

Question：請問this指向誰挺邀？

如果面試有人這么問你！你可以直接甩他一個(gè)大嘴巴跳座！然后大聲告訴他“this指向誰端铛，取決于誰調(diào)用函數(shù)！而不取決于函數(shù)寫在哪里疲眷！只有函數(shù)聲明禾蚕，沒有函數(shù)調(diào)用語句。我不知道this指向誰狂丝！”

然后换淆，面試官一定會捂著臉告訴你虚倒，“你被錄用了/(ㄒoㄒ)/~~”

哈哈，開完玩笑产舞，我們來研究一下，下面那個(gè)函數(shù)中的this菠剩，到底有可能指向誰易猫？杰小瑞老師總結(jié)了5大準(zhǔn)則，一起來看看吧~~

①通過函數(shù)名()直接調(diào)用：this指向window

func();//this--->window//【解釋】 我們直接用一個(gè)函數(shù)名()調(diào)用具壮，函數(shù)里面的this准颓，永遠(yuǎn)指向window。

② 通過對象.函數(shù)名()調(diào)用的：this指向這個(gè)對象

//狹義對象varobj ={

name:"obj",

func1 :func

};

obj.func1();//this--->obj//【解釋】我們將func函數(shù)名棺妓，當(dāng)做了obj這個(gè)對象的一個(gè)方法攘已，然后使用對象名.方法名， 這時(shí)候函數(shù)里面的this指向這個(gè)obj對象怜跑。//廣義對象document.getElementById("div").onclick =function(){this.style.backgroundColor = "red";

};//this--->div//【解釋】對象打點(diǎn)調(diào)用還有一個(gè)情況样勃，我們使用getElementById取到一個(gè)div控件，也是一種廣義的對象性芬，用它打點(diǎn)調(diào)用函數(shù)峡眶，則函數(shù)中的this指向這個(gè)div對象。

③ 函數(shù)作為數(shù)組的一個(gè)元素植锉，通過數(shù)組下標(biāo)調(diào)用的：this指向這個(gè)數(shù)組

vararr = [func,1,2,3];

arr[0]();//this--->arr//【解釋】這個(gè)辫樱，我們把函數(shù)名，當(dāng)做數(shù)組中的一個(gè)元素俊庇。使用數(shù)組下標(biāo)調(diào)用狮暑，則函數(shù)中的this將指向這個(gè)數(shù)組arr。

④ 函數(shù)作為window內(nèi)置函數(shù)的回調(diào)函數(shù)調(diào)用：this指向window

setTimeout(func,1000);//this--->window//setInterval(func,1000);//【解釋】使用setTimeout辉饱、setInterval等window內(nèi)置函數(shù)調(diào)用函數(shù)搬男，則函數(shù)中的this指向window。

⑤ 函數(shù)作為構(gòu)造函數(shù)鞋囊，用new關(guān)鍵字調(diào)用時(shí)：this指向新new出的對象

varobj =newfunc();//this--->new出的新obj//【解釋】這個(gè)就是第二部分我們使用構(gòu)造函數(shù)new對象的語句止后，將函數(shù)用new關(guān)鍵字調(diào)用，則函數(shù)中的this指向新new出的對象溜腐。

3.3綜合小練習(xí)

沒學(xué)得會译株，練習(xí)來校對！上述的五大準(zhǔn)則你理解了嗎挺益？讓我們來做幾個(gè)小練習(xí)吧歉糜？看看這些this都是指向誰？

varobj1 ={

name:'obj1',

arr:[setTimeout(func,3000),1,2,3]

}

document.getElementById("div").onclick = obj1.arr[0];//函數(shù)最終調(diào)用者：setTimeout 望众，符合規(guī)律⑤ this--->windowvarobj2 ={

name:'obj1',

arr:[func,1,2,3]

}

document.getElementById("div").onclick = obj2.arr[0]();//函數(shù)最終調(diào)用者：數(shù)組下標(biāo) 匪补，符合規(guī)律③ this--->arrvarobj3 ={

name:'obj1',

arr:[{name:'arrObj',fun:func},1,2,3]

}

document.getElementById("div").onclick = obj3.arr[0].fun();//函數(shù)最終調(diào)用者：{name:'arrObj',fun:func} 伞辛，符合規(guī)律② this--->obj

3.4模擬面試題

小練習(xí)都做出來了嗎？不要驕傲哦~~來看一套模擬面試題吧：蝗薄蚤氏！下面的打印語句都應(yīng)該是什么結(jié)果呢？先不要看答案踊兜，自己做一下吧~

varfullname = 'John Doe';varobj ={

fullname:'Colin Ihrig',

prop: {

fullname:'Aurelio De Rosa',

getFullname:function() {returnthis.fullname;

}

}

};vararr = [obj.prop.getFullname,12,3,4,5];

console.log(arr[0]());//this指向數(shù)組竿滨，數(shù)組沒有fullname屬性，所以未定義捏境！console.log(obj.prop.getFullname());//Aurelio De Rosa//函數(shù)最終調(diào)用者：obj.prop? this--->obj.propvartest =obj.prop.getFullname;

console.log(test());//John Doe//函數(shù)最終調(diào)用者： 函數(shù)() window? this-->windowobj.func =obj.prop.getFullname;

console.log(obj.func());//this最終調(diào)用者是obj于游，所以this指向obj

好了，通過本篇博客垫言，我們了解了什么是面向?qū)ο蠓“㈩惡蛯ο蟮年P(guān)系、JS中聲明類與對象的步驟筷频，以及重點(diǎn)講解的this指向問題蚌成！ 希望能夠幫助大家真正的理解了this的認(rèn)知，接下來的博客讓我們繼續(xù)探討JavaScript的面向?qū)ο蟆?/p>