面向對象的this指向

1 、OOP的基礎問題

1.1什麼是面向過程和麪向對象？

面向過程：專一於如何去解決一個問題的過程步驟。編程特色是由一個個的函數去實現每一步的過程步驟，沒有類和對象的概念。

面向對象：專一於由哪個對象來解決這個問題。編程特色是出現了一個個的類，從類中拿到這個對象，由這個對象去解決具體的問題。

對於調用者來講，面向過程須要調用者本身去實現各類函數。而面向對象，只須要告訴調用者對象中具體方法的功能，而不須要調用者瞭解方法中的實現細節。

1.2面向對象的三大特徵

繼承、封裝、多態

1.3類和對象的關係

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

好比：人類-->屬性：身高、體重、性別 方法：吃飯、說話、走路

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

好比：張三-->屬性：身高180、體重180 方法：說話-->我叫張三，身高180

③ 類和對象的關係

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

解釋一下：

類是一個抽象的概念，只能說類有屬性和方法，可是不能給屬性賦具體的值。好比說人類有姓名，可是不能說人類的姓名叫啥。。。

對象是一個具體的個例，是將類中的屬性進行具體賦值而來的個體。好比說張三是人類的一個個體，能夠說張三的姓名叫張三。也就是張三對人類的每個屬性進行了具體的賦值，那麼張三就是由人類產生的一個對象。

二、 JavaScript中的面向對象

2.1建立類和對象的步驟

①建立一個類(構造函數)：類名必須使用大駝峯法則，即每一個單詞的首字母必須大寫。

?

1 2 3 4 5 6

function 類名(屬性1){    this.屬性1 = 屬性1;    this.方法 = function(){     //方法中要調用自身屬性，必需要使用this.屬性    } }

②經過類，實例化(new)出一個對象。

var obj = new 類名(屬性1的具體值);

obj.屬性; 調用屬性

obj.方法(); 調用方法

③注意事項

>>>經過類名，new出一個對象的過程，叫作「類的實例化」

>>>類中的this，會在實例化的時候，指向新new出的對象。因此，this.屬性 this.方法，其實是將屬性和方法綁定在即將new出的對象上面。

>>>在類中，要調用自身屬性，必須使用this.屬性名、若是直接使用變量名，則沒法訪問對應的屬性。

>>>類名必須使用大駝峯法則，注意與普通函數的區別。

2.2兩個重要屬性constructor和instanceof

①constructor：返回當前對象的構造函數

>>>zhangsan.constructor = Person; √

②instanceof：檢測一個對象，是否是一個類的實例；

>>>lisi instanceof Person √ lisi是經過Person類new出的

>>>lisi instanceof Object √ 全部對象都是Object的實例

>>>Person instanceof Object √ 函數自己也是對象

三、 JavaScript中的this指向問題

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

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

① this指向誰，不該該考慮函數在哪聲明，而應該考慮函數在哪調用！！

② this指向的，永遠只多是對象，不多是函數！！

③ this指向的對象，叫作函數的上下文context，也叫函數的調用者。

3.2this指向的規律(與函數的調用方式息息相關！)

① 經過函數名()調用的，this永遠指向window

?

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

② 經過對象.方法調用的，this指向這個對象

?

1 2 3 4 5 6 7 8 9 10 11 12 13

// 狹義對象   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指向這個數組

?

1 2 3

var arr = [func,1,2,3]; arr[0](); // this--->arr //【解釋】這個，咱們把函數名，當作數組中的一個元素。使用數組下標調用，則函數中的this將指向這個數組arr。

④ 函數做爲window內置函數的回調函數使用，this指向window。好比setTimeout、setInterval等

?

1 2 3

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

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

?

1 2	var obj = new func(); //this--->new出的新obj //【解釋】這個就是第二部分咱們使用構造函數new對象的語句，將函數用new關鍵字調用，則函數中的this指向新new出的對象。

3.3關於this問題的面試題

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

var fullname = 'John Doe'; var obj = { 　　fullname: 'Colin Ihrig', 　　prop: { 　　　　fullname: 'Aurelio De Rosa', 　　　　getFullname: function() { 　　　　　　return this.fullname; 　　　　} 　　} }; console.log(obj.prop.getFullname()); // 函數的最終調用者 obj.prop      var test = obj.prop.getFullname; console.log(test()); // 函數的最終調用者 test() this-> window      obj.func = obj.prop.getFullname; console.log(obj.func()); // 函數最終調用者是obj      var arr = [obj.prop.getFullname,1,2]; arr.fullname = "JiangHao"; console.log(arr[0]()); // 函數最終調用者數組