1 、OOP的基礎問題
1.1什么是面向過程和面向對象？
面向過程：專注於如何去解決一個問題的過程步驟。編程特點是由一個個的函數去實現每一步的過程步驟，沒有類和對象的概念。
面向對象：專注於由哪一個對象來解決這個問題。編程特點是出現了一個個的類，從類中拿到這個對象，由這個對象去解決具體的問題。
對於調用者來說，面向過程需要調用者自己去實現各種函數。而面向對象，只需要告訴調用者對象中具體方法的功能，而不需要調用者了解方法中的實現細節。
1.2面向對象的三大特征
繼承、封裝、多態
1.3類和對象的關系
① 類：一類具有相同特征(屬性)和行為(方法)的集合。
比如：人類-->屬性：身高、體重、性別 方法：吃飯、說話、走路
② 對象：從類中，拿出具有確定屬性值和方法的個體。
比如：張三-->屬性：身高180、體重180 方法：說話-->我叫張三，身高180
③ 類和對象的關系
類是抽象的，對象是具體的(類是對象的抽象化，對象是類的具體化)
解釋一下：
類是一個抽象的概念，只能說類有屬性和方法，但是不能給屬性賦具體的值。比如說人類有姓名，但是不能說人類的姓名叫啥。。。
對象是一個具體的個例，是將類中的屬性進行具體賦值而來的個體。比如說張三是人類的一個個體，可以說張三的姓名叫張三。也就是張三對人類的每一個屬性進行了具體的賦值，那么張三就是由人類產生的一個對象。
2、 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 √ 函數本身也是對象
3、 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]());
// 函數最終調用者數組
|