這篇文章主要介紹了javascript中的面向對象編程知識點，對面向對象編程進行概述，以及各種方法進行整理，感興趣的小伙伴們可以參考一下

1、面向對象的工廠方法

1. function createPerson(name, age, job){ 
2. var o = new Object(); 
3. o.name = name; 
4. o.age = age; 
5. o.job = job; 
6. o.sayName = function(){ 
7. alert(this.name); 
8. };  
9. return o; 
10. } 
11.  
12. var person1 = createPerson("Nicholas", 29, "Software Engineer"); 
13. var person2 = createPerson("Greg", 27, "Doctor"); 
14.  
15. person1.sayName(); //"Nicholas" 
16. person2.sayName(); //"Greg" 

工廠模型的方法的缺點是會產生大量重復代碼!

2、構造函數模式創建對象

1. function Person(name, age, job){ 
2. this.name = name; 
3. this.age = age; 
4. this.job = job; 
5. this.sayName = function(){ 
6. alert(this.name); 
7. };  
8. } 
9.  
10. var person1 = new Person("Nicholas", 29, "Software Engineer"); 
11. var person2 = new Person("Greg", 27, "Doctor"); 
12.  
13. person1.sayName(); //"Nicholas" 
14. person2.sayName(); //"Greg" 
15.  
16. alert(person1 instanceof Object); //true 
17. alert(person1 instanceof Person); //true 
18. alert(person2 instanceof Object); //true 
19. alert(person2 instanceof Person); //true 
20.  
21. alert(person1.constructor == Person); //true 
22. alert(person2.constructor == Person); //true 
23.  
24. alert(person1.sayName == person2.sayName); //false 

使用new關鍵字創建對象會經歷以下四個過程

1、創建一個新對象

2、將構造函數的作用域賦給一個新對象(因此this就指向了這個新對象)

3、執行構造函數的方法(為這個新對象賦值)

4、返回新對象

3、將構造函數當函數用

1. function Person(name, age, job){ 
2. this.name = name; 
3. this.age = age; 
4. this.job = job; 
5. this.sayName = function(){ 
6. alert(this.name); 
7. }; 
8. } 
9.  
10. var person = new Person("Nicholas", 29, "Software Engineer"); 
11. person.sayName(); //"Nicholas" 
12.  
13. Person("Greg", 27, "Doctor"); //adds to window 
14. window.sayName(); //"Greg" 
15.  
16. var o = new Object(); 
17. Person.call(o, "Kristen", 25, "Nurse"); 
18. o.sayName(); //"Kristen" 

構造函數當做函數使用就和普通的函數沒有任何不同，它屬于window對象下面添加的方法而已。由于構造函數創建的對象實際上是創建一個新對象，因此在本質上兩者還是不一樣的，還是分離的，他們的方法還是不一樣的!

4、將共有的方法方法全局解決不一致的問題

1. function Person(name, age, job){ 
2. this.name = name; 
3. this.age = age; 
4. this.job = job; 
5. this.sayName = sayName; 
6. } 
7.  
8. function sayName(){ 
9. alert(this.name); 
10. } 
11.  
12. var person1 = new Person("Nicholas", 29, "Software Engineer"); 
13. var person2 = new Person("Greg", 27, "Doctor"); 
14.  
15. person1.sayName(); //"Nicholas" 
16. person2.sayName(); //"Greg" 
17.  
18. alert(person1 instanceof Object); //true 
19. alert(person1 instanceof Person); //true 
20. alert(person2 instanceof Object); //true 
21. alert(person2 instanceof Person); //true 
22.  
23. alert(person1.constructor == Person); //true 
24. alert(person2.constructor == Person); //true 
25.  
26. alert(person1.sayName == person2.sayName); //true 

雖然上面的方法解決了一致的問題，但是定義的全局的方法本身屬于window，那么局部和全局就沒有分開!所以這個方法使用的并不多見!也不建議使用。

5、原型模式

我們創建的任何的一個函數都有一個原型對象，這個屬性是一個指針，它指向一個對象，而這個對象的作用是可以有特定的類型的所有的實例共享的方法!

1. function Person(){ 
2. } 
3.  
4. Person.prototype.name = "Nicholas"; 
5. Person.prototype.age = 29; 
6. Person.prototype.job = "Software Engineer"; 
7. Person.prototype.sayName = function(){ 
8. alert(this.name); 
9. }; 
10.  
11. var person1 = new Person(); 
12. person1.sayName(); //"Nicholas" 
13.  
14. var person2 = new Person(); 
15. person2.sayName(); //"Nicholas" 
16.  
17. alert(person1.sayName == person2.sayName); //true 
18.  
19. alert(Person.prototype.isPrototypeOf(person1)); //true 
20. alert(Person.prototype.isPrototypeOf(person2)); //true 
21.  
22. //only works if Object.getPrototypeOf() is available 
23. if (Object.getPrototypeOf){ 
24. alert(Object.getPrototypeOf(person1) == Person.prototype); //true 
25. alert(Object.getPrototypeOf(person1).name); //"Nicholas" 
26. } 

理解原型

無論什么時候只要是創建了一個函數，就會創建一個原型屬性，這個屬性指向函數的原型對象。在默認的情況下，原型對象都會包含一個constructor(構造函數屬性)，這個屬性包含一個指向prototype屬性所在函數的指針!

屬性讀取的順序

每當代碼讀取某個對象的屬性時候，都會執行一次搜索，目標是具有給定名字的屬性，搜索從對象的實例本身開始查找，如有則返回，沒有則繼續搜索該對象的原型鏈，直至搜索到原型鏈的最外層!

1. function Person(){ 
2. } 
3.  
4. Person.prototype.name = "Nicholas"; 
5. Person.prototype.age = 29; 
6. Person.prototype.job = "Software Engineer"; 
7. Person.prototype.sayName = function(){ 
8. alert(this.name); 
9. }; 
10.  
11. var person1 = new Person(); 
12. var person2 = new Person(); 
13.  
14. person1.name = "Greg"; 
15. alert(person1.name); //"Greg" 來自實例 
16. alert(person2.name); //"Nicholas" 來自原型 

如果刪除了這個元素的實例屬性

1. function Person(){ 
2. } 
3.  
4. Person.prototype.name = "Nicholas"; 
5. Person.prototype.age = 29; 
6. Person.prototype.job = "Software Engineer"; 
7. Person.prototype.sayName = function(){ 
8. alert(this.name); 
9. }; 
10.  
11. var person1 = new Person(); 
12. var person2 = new Person(); 
13.  
14. person1.name = "Greg"; 
15. alert(person1.name); //"Greg" ?from instance 
16. alert(person2.name); //"Nicholas" ?from prototype 
17.  
18. delete person1.name; 
19. alert(person1.name); //"Nicholas" - from the prototype 

6、hasOwnProperty方法

這個方法可以檢測一個屬性是否存在于實例中，還是存在于原型中!hasOwnProperty是從Object繼承來的，只要給定屬性存在于對象實例中，才會返回true.

1. function Person(){ 
2. } 
3.  
4. Person.prototype.name = "Nicholas"; 
5. Person.prototype.age = 29; 
6. Person.prototype.job = "Software Engineer"; 
7. Person.prototype.sayName = function(){ 
8. alert(this.name); 
9. }; 
10.  
11. var person1 = new Person(); 
12. var person2 = new Person(); 
13.  
14. alert(person1.hasOwnProperty("name")); //false 
15. alert("name" in person1); //true 
16.  
17. person1.name = "Greg"; 
18. alert(person1.name); //"Greg" ?from instance 
19. alert(person1.hasOwnProperty("name")); //true 
20. alert("name" in person1); //true 
21.  
22. alert(person2.name); //"Nicholas" ?from prototype 
23. alert(person2.hasOwnProperty("name")); //false 
24. alert("name" in person2); //true 
25.  
26. delete person1.name; 
27. alert(person1.name); //"Nicholas" - from the prototype 
28. alert(person1.hasOwnProperty("name")); //false 
29. alert("name" in person1); //true 

7、Object.keys() 可枚舉屬性方法

這個方法接收一個對象作為參數，返回一個包含所有可枚舉屬性的字符串數組

1. function Person(){ 
2. } 
3.  
4. Person.prototype.name = "Nicholas"; 
5. Person.prototype.age = 29; 
6. Person.prototype.job = "Software Engineer"; 
7. Person.prototype.sayName = function(){ 
8. alert(this.name); 
9. }; 
10.  
11. var keys = Object.keys(Person.prototype); 
12. alert(keys); //"name,age,job,sayName" 
13. 如果想得到所有實例的屬性，無論它是否可以枚舉都可以使用這個方法來獲取 
14. function Person(){ 
15. } 
16.  
17. Person.prototype.name = "Nicholas"; 
18. Person.prototype.age = 29; 
19. Person.prototype.job = "Software Engineer"; 
20. Person.prototype.sayName = function(){ 
21. alert(this.name); 
22. }; 
23.  
24. var keys = Object.getOwnPropertyNames(Person.prototype); 
25. alert(keys); //"constructor,name,age,job,sayName" 

此方法高版本瀏覽器才支持

8、簡單的原型寫法

1. function Person(){ 
2. } 
3.  
4. Person.prototype = { 
5. name : "Nicholas", 
6. age : 29, 
7. job: "Software Engineer", 
8. sayName : function () { 
9. alert(this.name); 
10. } 
11. }; 
12.  
13. var friend = new Person(); 
14.  
15. alert(friend instanceof Object); //true 
16. alert(friend instanceof Person); //true 
17. alert(friend.constructor == Person); //false 
18. alert(friend.constructor == Object); //true 

重寫了原型就等于將默認的原型方法覆蓋，那么同樣的構造方法也會被重寫，重寫的構造方法指向了Object對象!而不是原來的對象Person

如果還是想指向之前的構造方法，可以顯示的指定

1. function Person(){ 
2. } 
3.  
4. Person.prototype = { 
5. constructor : Person, 
6. name : "Nicholas", 
7. age : 29, 
8. job: "Software Engineer", 
9. sayName : function () { 
10. alert(this.name); 
11. } 
12. }; 
13.  
14. var friend = new Person(); 
15.  
16. alert(friend instanceof Object); //true 
17. alert(friend instanceof Person); //true 
18. alert(friend.constructor == Person); //true 
19. alert(friend.constructor == Object); //false 

9、原型方法的動態添加

1. function Person(){ 
2. } 
3.  
4. Person.prototype = { 
5. constructor: Person, 
6. name : "Nicholas", 
7. age : 29, 
8. job : "Software Engineer", 
9. sayName : function () { 
10. alert(this.name); 
11. } 
12. }; 
13.  
14. var friend = new Person(); 
15.  
16. Person.prototype.sayHi = function(){ 
17. alert("hi"); 
18. }; 
19.  
20. friend.sayHi(); //"hi" ?works! 

10、原生對象的原型方法

1. alert(typeof Array.prototype.sort); //"function" 
2. alert(typeof String.prototype.substring); //"function" 
3.  
4. String.prototype.startsWith = function (text) {//修改原生對象的原型方法 
5. return this.indexOf(text) == 0; 
6. }; 
7.  
8. var msg = "Hello world!"; 
9. alert(msg.startsWith("Hello")); //true 

11、組合使用構造函數和原型模式創建對象

1. //構造函數模式 
2. function Person(name, age, job){ 
3. this.name = name; 
4. this.age = age; 
5. this.job = job; 
6. this.friends = ["Shelby", "Court"]; 
7. } 
8. //原型模式 
9. Person.prototype = { 
10. constructor: Person, 
11. sayName : function () { 
12. alert(this.name); 
13. } 
14. }; 
15.  
16. var person1 = new Person("Nicholas", 29, "Software Engineer"); 
17. var person2 = new Person("Greg", 27, "Doctor"); 
18.  
19. person1.friends.push("Van"); 
20.  
21. alert(person1.friends); //"Shelby,Court,Van" 
22. alert(person2.friends); //"Shelby,Court" 
23. alert(person1.friends === person2.friends); //false 
24. alert(person1.sayName === person2.sayName); //true 

12、動態原型模式

1. function Person(name, age, job){ 
2.  
3. //properties 
4. this.name = name; 
5. this.age = age; 
6. this.job = job; 
7.  
8. //methods 
9. if (typeof this.sayName != "function"){ 
10.  
11. Person.prototype.sayName = function(){ 
12. alert(this.name); 
13. }; 
14.  
15. } 
16. } 
17.  
18. var friend = new Person("Nicholas", 29, "Software Engineer"); 
19. friend.sayName(); 

13、寄生構造函數模式

1. function Person(name, age, job){ 
2. var o = new Object();//依賴全局對象初始化一個對象，然后再返回這個對象 
3. o.name = name; 
4. o.age = age; 
5. o.job = job; 
6. o.sayName = function(){ 
7. alert(this.name); 
8. };  
9. return o; 
10. } 
11.  
12. var friend = new Person("Nicholas", 29, "Software Engineer"); 
13. friend.sayName(); //"Nicholas" 
14.  
15. function SpecialArray(){  
16.  
17. //create the array 
18. var values = new Array(); 
19.  
20. //add the values 
21. values.push.apply(values, arguments); 
22.  
23. //assign the method 
24. values.toPipedString = function(){ 
25. return this.join("|"); 
26. }; 
27.  
28. //return it 
29. return values;  
30. } 
31.  
32. var colors = new SpecialArray("red", "blue", "green"); 
33. alert(colors.toPipedString()); //"red|blue|green" 
34.  
35. alert(colors instanceof SpecialArray); 

上訴方法有一點說明下，由于它是依賴外層對象來創建一個新對象，因此不能依賴 instanceof方法來確定屬性和方法的來源!它實際上和構造函數的沒有關系!

14、穩妥構造函數模式

1. function Person(name, age, job){ 
2. var o = new Object(); 
3. o.sayName = function(){ 
4. alert(name); 
5. };  
6. return o; 
7. } 
8.  
9. var friend = Person("Nicholas", 29, "Software Engineer"); 
10. friend.sayName(); //"Nicholas" 

此方法不依賴任何new this 關鍵符!如果要訪問對象的方法和屬性，只能通過對象已經定義好的方法來獲取!

15、繼承

javascript實現繼承是通過原型鏈來實現的

1. function SuperType(){ 
2. this.property = true;//定義一個屬性 
3. } 
4.  
5. SuperType.prototype.getSuperValue = function(){//定義的原型方法 
6. return this.property; 
7. }; 
8.  
9. function SubType(){ 
10. this.subproperty = false; 
11. } 
12.  
13. //inherit from SuperType 
14. SubType.prototype = new SuperType(); 
15.  
16. SubType.prototype.getSubValue = function (){ 
17. return this.subproperty; 
18. }; 
19.  
20. var instance = new SubType(); 
21. alert(instance.getSuperValue()); //true 
22.  
23. alert(instance instanceof Object); //true 
24. alert(instance instanceof SuperType); //true 
25. alert(instance instanceof SubType); //true 
26.  
27. alert(Object.prototype.isPrototypeOf(instance)); //true 
28. alert(SuperType.prototype.isPrototypeOf(instance)); //true 
29. alert(SubType.prototype.isPrototypeOf(instance)); //true 
30. SubType繼承SuperType的方法和屬性，因此當instance可以直接調用SuperType的方法！ 
31. function SuperType(){ 
32. this.property = true; 
33. } 
34.  
35. SuperType.prototype.getSuperValue = function(){ 
36. return this.property; 
37. }; 
38.  
39. function SubType(){ 
40. this.subproperty = false; 
41. } 
42.  
43. //inherit from SuperType 
44. SubType.prototype = new SuperType(); 
45.  
46. //new method 
47. SubType.prototype.getSubValue = function (){ 
48. return this.subproperty; 
49. }; 
50.  
51. //override existing method 
52. SubType.prototype.getSuperValue = function (){ 
53. return false; 
54. }; 
55.  
56. var instance = new SubType(); 
57. alert(instance.getSuperValue()); //false 

上面的例子說明，重寫的原型會覆蓋之前繼承的原型，最后返回的往往不是預期的效果

1. function SuperType(){ 
2. this.property = true; 
3. } 
4.  
5. SuperType.prototype.getSuperValue = function(){ 
6. return this.property; 
7. }; 
8.  
9. function SubType(){ 
10. this.subproperty = false; 
11. } 
12.  
13. //inherit from SuperType 
14. SubType.prototype = new SuperType(); 
15.  
16. //使用字面量添加的方法導致上面的方法失效了 
17. SubType.prototype = { 
18. getSubValue : function (){ 
19. return this.subproperty; 
20. }, 
21.  
22. someOtherMethod : function (){ 
23. return false; 
24. } 
25. };  
26.  
27. var instance = new SubType(); 
28. console.log(instance); 
29. alert(instance.getSuperValue()); //error! 

下面的例子也說明重寫原型帶來的風險

1. function SuperType(){ 
2. this.colors = ["red", "blue", "green"]; 
3. } 
4.  
5. function SubType(){  
6. } 
7.  
8. //inherit from SuperType 
9. SubType.prototype = new SuperType(); 
10.  
11. var instance1 = new SubType(); 
12. instance1.colors.push("black"); 
13. alert(instance1.colors); //"red,blue,green,black" 
14.  
15. var instance2 = new SubType(); 
16. alert(instance2.colors); //"red,blue,green,black" 

原型共享導致兩個不同的對象調用的同一個數據

16、借用構造函數來實現繼承

1. function SuperType(){ 
2. this.colors = ["red", "blue", "green"]; 
3. } 
4.  
5. function SubType(){  
6. //inherit from SuperType 
7. SuperType.call(this); 
8. } 
9.  
10. var instance1 = new SubType(); 
11. instance1.colors.push("black"); 
12. alert(instance1.colors); //"red,blue,green,black" 
13.  
14. var instance2 = new SubType(); 
15. alert(instance2.colors); //"red,blue,green" 

傳遞參數

1. function SuperType(name){ 
2. this.name = name; 
3. } 
4.  
5. function SubType(){  
6. //inherit from SuperType passing in an argument 
7. SuperType.call(this, "Nicholas"); 
8.  
9. //instance property 
10. this.age = 29; 
11. } 
12.  
13. var instance = new SubType(); 
14. alert(instance.name); //"Nicholas"; 
15. alert(instance.age); //29 

17、組合繼承方式

1. function SuperType(name){ 
2. this.name = name; 
3. this.colors = ["red", "blue", "green"]; 
4. } 
5.  
6. SuperType.prototype.sayName = function(){ 
7. alert(this.name); 
8. }; 
9.  
10. function SubType(name, age){  
11. SuperType.call(this, name); 
12.  
13. this.age = age; 
14. } 

18、原型繼承

1. function object(o){ 
2. function F(){} 
3. F.prototype = o; 
4. return new F(); 
5. } 
6.  
7. var person = { 
8. name: "Nicholas", 
9. friends: ["Shelby", "Court", "Van"] 
10. }; 
11.  
12. var anotherPerson = object(person); 
13. anotherPerson.name = "Greg"; 
14. anotherPerson.friends.push("Rob"); 

19、寄生組合式繼承

1. function object(o){ 
2. function F(){} 
3. F.prototype = o; 
4. return new F(); 
5. } 
6.  
7. function inheritPrototype(subType, superType){ 
8. var prototype = object(superType.prototype); //create object 
9. prototype.constructor = subType; //augment object 
10. subType.prototype = prototype; //assign object 
11. } 
12.  
13. function SuperType(name){ 
14. this.name = name; 
15. this.colors = ["red", "blue", "green"]; 
16. } 
17.  
18. SuperType.prototype.sayName = function(){ 
19. alert(this.name); 
20. }; 
21.  
22. function SubType(name, age){  
23. SuperType.call(this, name); 
24.  
25. this.age = age; 
26. } 
27.  
28. inheritPrototype(SubType, SuperType); 
29.  
30. SubType.prototype.sayAge = function(){ 
31. alert(this.age); 
32. }; 
33.  
34. var instance1 = new SubType("Nicholas", 29); 
35. instance1.colors.push("black"); 
36. alert(instance1.colors); //"red,blue,green,black" 
37. instance1.sayName(); //"Nicholas"; 
38. instance1.sayAge(); //29 
39.  
40.  
41. var instance2 = new SubType("Greg", 27); 
42. alert(instance2.colors); //"red,blue,green" 
43. instance2.sayName(); //"Greg"; 
44. instance2.sayAge(); //27 

以上就是今天的javascript學習小結，之后每天還會繼續更新，希望大家繼續關注。