JavaScript面向對象(一)——JS OOP基礎與JS 中This指向詳解

前  言

　　學過程序語言的都知道，咱們的程序語言進化是從「面向機器」、到「面向過程」、再到「面向對象」一步步的發展而來。相似於彙編語言這樣的面向機器的語言，隨着時代的發展已經逐漸淘汰；而面向過程的語言也只有C語言老大哥依然堅挺；如今主流的語言(例如Java、C++、PHP等)都是面向對象的語言。 而咱們的JavaScript語言，偏偏介於面向過程與面向對象之間，咱們稱它爲「基於對象」的語言。可是，JS中的OOP依然是咱們學習JS的重要一環，固然像「繼承」「封裝」這樣的面向對象特徵，都是由模擬實現的。今天，咱們就一塊兒來探討一下JS中的面向對象吧！

 

1、面向對象概述

1.1面向過程與面向對象

　　面向過程：專一於如何去解決一個問題的過程。編程特色是用一個個函數去實現過程操做，沒有類與對象的概念；

　　[舉個栗子]

　　當你想吃一個雞蛋灌餅的時候，面向過程的思惟須要你掌握購買食材、和麪、烙餅、煎蛋等一系列的方法，而後按照順序一個一個方法的去執行。

 

　　面向對象：專一於有哪個對象實體去解決這個問題。編程特色是：出現了一個個的類，由類去生成對象。

　　[舉個栗子]

　　仍是想吃雞蛋灌餅，按照面向對象的思惟，你須要去找一個買雞蛋灌餅的阿姨，讓他給你作一個。這時候，這個阿姨就是咱們解決這個問題的對象。

 

1.2面向對象三大特徵

　　繼承、封裝、多態

 

1.3類&對象的關係

　　① 類：一羣有相同特徵(屬性)和行爲(方法)的集合。

　　eg： 人類  屬性：身高、體重、年齡   方法：吃飯、說話、敲代碼

　　② 對象：從類中，拿出的具備肯定屬性值和方法的個體；

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

　　③ 類和對象的關係：

　　類是抽象的，對象是具體的。(類是對象的抽象化，對象是類的具體化)

 

　　通俗的來說：類是一個抽象的概念，表示具備相同屬性和行爲的集合，可是類僅僅代表這類羣體具備相同的屬性，可是沒有具體的屬性值。而對象是對類的屬性進行具體賦值後，而獲得的一個具體的個體；

　　[舉個栗子]

　　人類有身高、體重、年齡，可是不能說人類的身高是多少。而張三，是人類的一個具體個體，身高、體重都有具體值，那麼張三就是人類的一個對象

 

2、JavaScript中的面向對象

2.1建立類和對象的步驟

　　① 建立一個類(構造函數)。 類名，必需要每一個單詞的首字母都大寫

funtion 類名(屬性一){ 　　this.屬性=屬性一; 　　this.方法=function(){}//this指向誰？ -- 即將調用當前構造函數的對象。
}

　　② 經過類，實例化出一個新的對象；

var obj =new類名(屬性一的Value);//原構造函數中this，指向新建立的obj對象；
obj.方法(); 調用方法 obj.屬性; 調用屬性

 

2.2內建立類和對象代碼示例

//① 定義一個類(構造函數)
 functionPerson(name,age,sex){ 　　//類的屬性

　　this.name =name; 　　this.age =age; 　　this.sex =sex; 　　//類的方法

　　this.say =function(){ 　　　　alert("我叫"+this.name+";今年"+this.age+"歲；是一個"+this.sex+"生"); 　　} } //從類中，實例化出一個對象。並給對象的屬性賦值

var zhangsan =newPerson("張三",18,"男");//  zhangsan.say(); var lisi =newPerson("李二狗",16,"男");//  lisi.say();

 

3、JavaScript中的this指向問題

　　在上一部分中，咱們建立了一個類，並經過這個類new出了一個對象。 可是，這裏面出現了大量的this。 不少同窗就要懵逼了，this不是「這個」的意思嗎？爲何我在函數裏面寫的this定義的屬性，最後到了函數new出的對象呢？？

　　今天，就讓咱們撥開迷霧，緊緊記住「傑小瑞this五大準則」。幫你縷清關於JS中this指向的一切謎團。

3.1誰最終調用函數，this指向誰

　　首先來明白this指向的基本概念，「this永遠指向函數的最終調用者」，理解這句話，咱們先明確三個基本要素：

　　①this指向的，永遠只多是對象！！！！！！

　　②this指向誰，永遠不取決於this寫在哪！！而是取決於函數在哪調用。

　　③this指向的對象，咱們稱之爲函數的上下文context，也叫函數的調用者

　　可能有同窗要說了，我明確了這三個要素了，我也看不懂this的指向啊。var obj = new function();第二部分的這句話，怎麼就讓函數(類)中的this指向obj了啊？一臉懵逼ing。。。

　　那麼，接下來，就讓咱們祭出「傑小瑞this五大法寶」吧！記住這5條，全部this指向手到擒來！

 

3.2※※※this指向的規律(傑小瑞this五大準則)

　　首先，咱們寫這樣的一個函數：

functionfunc(){

　　console.log(this);

}

　　Question：請問this指向誰？

　　若是面試有人這麼問你！你能夠直接甩他一個大嘴巴！而後大聲告訴他「this指向誰，取決於誰調用函數！而不取決於函數寫在哪裏！只有函數聲明，沒有函數調用語句。我不知道this指向誰！」

　　而後，面試官必定會捂着臉告訴你，「你被錄用了/(ㄒoㄒ)/~~」

 

　　哈哈，開完玩笑，咱們來研究一下，下面那個函數中的this，到底有可能指向誰？傑小瑞老師總結了5大準則，一塊兒來看看吧~~

　　①經過函數名()直接調用：this指向window

func();//this--->window //【解釋】 咱們直接用一個函數名()調用，函數裏面的this，永遠指向window。

　　② 經過對象.函數名()調用的：this指向這個對象

//狹義對象

var obj ={ 　　name:"obj", 　　func1 :func }; obj.func1();//this--->obj

//【解釋】咱們將func函數名，當作了obj這個對象的一個方法，而後使用對象名.方法名， 這時候函數裏面的this指向這個obj對象。



//廣義對象
 document.getElementById("div").onclick =function(){ 　　this.style.backgroundColor = "red"; };//this--->div

//【解釋】對象打點調用還有一個狀況，咱們使用getElementById取到一個div控件，也是一種廣義的對象，用它打點調用函數，則函數中的this指向這個div對象。

　　③ 函數做爲數組的一個元素，經過數組下標調用的：this指向這個數組

vararr = [func,1,2,3]; arr[0]();//this--->arr

//【解釋】這個，咱們把函數名，當作數組中的一個元素。使用數組下標調用，則函數中的this將指向這個數組arr。

　　④ 函數做爲window內置函數的回調函數調用：this指向window

setTimeout(func,1000);//this--->window
//setInterval(func,1000);
//【解釋】使用setTimeout、setInterval等window內置函數調用函數，則函數中的this指向window。

　　⑤ 函數做爲構造函數，用new關鍵字調用時：this指向新new出的對象

var obj =newfunc();//this--->new出的新obj

//【解釋】這個就是第二部分咱們使用構造函數new對象的語句，將函數用new關鍵字調用，則函數中的this指向新new出的對象。

3.3綜合小練習

沒學得會，練習來校對！上述的五大準則你理解了嗎？讓咱們來作幾個小練習吧？看看這些this都是指向誰？

var obj1 ={ 　　name:'obj1', 　　arr:[setTimeout(func,3000),1,2,3] } document.getElementById("div").onclick = obj1.arr[0]; //函數最終調用者：setTimeout ，符合規律⑤ this--->window

var obj2 ={ 　　name:'obj1', 　　arr:[func,1,2,3] } document.getElementById("div").onclick = obj2.arr[0]();//函數最終調用者：數組下標 ，符合規律③ this--->arr

var obj3 ={ 　　name:'obj1', 　　arr:[{name:'arrObj',fun:func},1,2,3] } document.getElementById("div").onclick = obj3.arr[0].fun();//函數最終調用者：{name:'arrObj',fun:func} ，符合規律② this--->obj

 

3.4模擬面試題

小練習都作出來了嗎？不要驕傲哦~~來看一套模擬面試題吧！！下面的打印語句都應該是什麼結果呢？先不要看答案，本身作一下吧~

var fullname = 'John Doe'; var obj ={ 　　fullname:'Colin Ihrig', 　　prop: { 　　　　fullname:'Aurelio De Rosa', 　　　　getFullname:function() { 　　　　　　return this.fullname; 　　　　} 　　} }; var arr = [obj.prop.getFullname,12,3,4,5]; console.log(arr[0]());/ /this指向數組，數組沒有fullname屬性，因此未定義！
 console.log(obj.prop.getFullname());//Aurelio De Rosa//函數最終調用者：obj.prop this--->obj.propvartest =obj.prop.getFullname;
 console.log(test());//John Doe//函數最終調用者： 函數() window this-->windowobj.func =obj.prop.getFullname;
 console.log(obj.func());//this最終調用者是obj，因此this指向obj

 

好了，經過本篇博客，咱們瞭解了什麼是面向對象、類和對象的關係、JS中聲明類與對象的步驟，以及重點講解的this指向問題！ 但願可以幫助你們真正的理解了this的認知，接下來的博客讓咱們繼續探討JavaScript的面向對象。

原文出處：https://www.cnblogs.com/qdjianghao/p/10177360.html