淺談JS中的繼承

前言

JS 是沒有繼承的，不過能夠曲線救國，利用構造函數、原型等方法實現繼承的功能。

1 var o=new Object();

其實用構造函數實例化一個對象，就是繼承，這裏可使用Object中的全部屬性與方法。那麼爲何能訪問Object對象的方法，其實訪問的是其原型對象的方法，全部的方法都是放在原型中而不是類中。

1 console.log(o.__proto__ === Object.prototype) // true  繼承的本質
2 console.log(o.__proto__ === Object);
3 console.log(Object.__proto__ === Function.prototype);
4 console.log(Function.prototype.__proto__ === Object.prototype);
5 console.log(Number.__proto__ === Function.prototype);

object是萬物祖先，Everything is object 嘛。

 

一、內置對象都繼承自object

 

1 var myNumber = new Number(10); //實例化一個數字對象

字符串對象，實際上是String對象的一個實例化

 

1 var s = ‘str’;

 

除了能夠訪問自身屬性方法，還能訪問父類屬性方法

 

1 console.log(s.toUpperCase());
2 console.log(s.toString());

 

二、自定義對象的繼承

 

 1 // 父類
 2     var Person = function(){
 3       this.name='AV老師';
 4       this.test='測試中的畢福劍';
 5     }  
 6     Person.prototype={
 7       say:function(){
 8         console.log('呀買碟');
 9       }
10     }
11     // 構造函數
12     var Canglaoshi = function(name,age,cup){
13       this.name=name;
14       this.age=age;
15       this.cup=cup;
16     }
17     // 繼承person,則擁有person原型中的方法
18     Canglaoshi.prototype=new Person();
19     Canglaoshi.prototype.ppp=function(){
20       console.log('啪啪啪');
21     }
22     // 蒼老師擁有了person中的方法
23     var xiaocang=new Canglaoshi('空空',18,'E');
24     xiaocang.say();
25     console.log(xiaocang.name);
26     console.log(xiaocang.age);
27     console.log(xiaocang.cup);
28     console.log(xiaocang.test);

 

三、自定義對象繼承的原型鏈演示

 

 1 +(function() {
 2       //父類
 3       function SuperParent() {
 4         this.name = 'mike';
 5       }
 6 
 7       //子類繼承父親 - 二次繼承：
 8       function Parent() {
 9         this.age = 12;
10       }
11       Parent.prototype = new SuperParent(); //經過原型，造成鏈條
12 
13       var parent = new Parent();
14       console.log("測試父親能夠訪問爺爺屬性：" + parent.name);
15       console.log("測試父親能夠訪問本身的屬性：" + parent.age);
16 
17       //繼續原型鏈繼承 - 三次繼承
18       function Child() { //brother構造
19         this.weight = 60;
20       }
21       Child.prototype = new Parent(); //繼續原型鏈繼承
22 
23 
24       //原型鏈測試2
25       //兒子集成爺爺
26       var child = new Child();
27       console.log("測試兒子能夠訪問爺爺的屬性：" + child.name); //繼承了Parent和Child,彈出mike
28       console.log("測試兒子能夠訪問父親的屬性：" + child.age); //彈出12
29       console.log("測試兒子能夠訪問本身獨特的屬性：" + child.weight); //彈出12
30 
31       //原型鏈測試
32       //爺爺能夠訪問Object中的方法
33       var test = new SuperParent();
34       console.log(test.name);
35       console.log(test.toString());
36       //訪問鏈： SuperParent構造對象--》SuperParent原型對象--》Object對象--》Obect原型對象（找到toString方法）--》null
37 
38       console.log(child.name);
39       //原型鏈：首先訪問Child構造函數，發現沒有name屬性--》尋找__proto__，判斷起指針是否爲空--》指向Child原型函數，尋找有沒有name屬性--》
40       //---》沒有找到，則判斷其__proto__屬性是否爲null，若是不爲null，繼續搜索--》找到parent對象，檢查是否有name屬性，沒有。。。。
41     })()

 

四、構造函數繼承

 

 1 +(function() {
 2       function People() {
 3         this.race = '人類';
 4       }
 5       People.prototype = {
 6         eat: function() {
 7           alert('吃吃吃');
 8         }
 9       }
10 
11       /*人妖對象*/
12       function Shemale(name, skin) {
13         People.apply(this, arguments); // 用call也是同樣的，注意第二個參數
14         this.name = name;
15         this.skin = skin;
16       }
17       //實例化 
18       var zhangsan = new Shemale('張三', '黃皮膚')
19       console.log(zhangsan.name); //張三
20       console.log(zhangsan.skin); //黃皮膚
21       console.log(zhangsan.race); //人類
22     })()

 

五、組合繼承

 1 +(function() {
 2       function Person(name, age) {
 3         this.name = name;
 4         this.age = age;
 5       }
 6       Person.prototype.say = function() {}
 7 
 8       function Man(name, age, no) {
 9         /*會自動調用Person的方法，同時將name age傳遞過去*/
10         Person.call(this, name, age);
11         //本身的屬性
12         this.no = no;
13       }
14       Man.prototype = new Person();
15 
16       var man = new Man("張三", 11, "0001");
17       console.log(man.name);
18       console.log(man.age);
19       console.log(man.no);
20     })()

 

六、拷貝繼承

 1 <script>
 2     +(function() {
 3       var Chinese = {
 4         nation: '中國'
 5       };
 6       var Doctor = {
 7         career: '醫生'
 8       };
 9       //    請問怎樣才能讓"醫生"去繼承"中國人"，也就是說，我怎樣才能生成一個"中國醫生"的對象？
10       //    這裏要注意，這兩個對象都是普通對象，不是構造函數，沒法使用構造函數方法實現"繼承"。
11       function extend(p) {
12         var c = {};
13         for (var i in p) {　　　　　
14           c[i] = p[i];　　　　
15         }
16         c.uber = p;
17         return c;
18       }
19       var Doctor = extend(Chinese);
20       Doctor.career = '醫生';
21       alert(Doctor.nation); // 中國
22     })()
23   </script>

 

七、寄生組合繼承

 1 <script>
 2     +(function() {
 3       /*繼承的固定函數*/
 4       function inheritPrototype(subType, superType) {
 5         var prototype = Object(superType.prototype);
 6         prototype.constructor = subType;
 7         subType.prototype = prototype;
 8       }
 9 
10       function Person(name) {
11         this.name = name;
12       }
13       Person.prototype.say = function() {}
14 
15       function Student(name, age) {
16         Person.call(this, name);
17         this.age = age;
18       }
19 
20       inheritPrototype(Student, Person);
21       var xiaozhang = new Student('小張', 20);
22       console.log(xiaozhang.name)
23     })()
24   </script>

 

八、使用第三方框架實現繼承

 1  <script src='simple.js'></script>  
 2   <!-- 使用的第三方框架simple.js -->
 3   <script>
 4     +(function() { < script >
 5         var Person = Class.extend({
 6           init: function(age, name) {
 7             this.age = age;
 8             this.name = name;
 9           },
10           ppp: function() {
11             alert("你懂的");
12           }
13         });
14       var Man = Person.extend({
15         init: function(age, name, height) {
16           this._super(age, name);
17           this.height = height;
18         },
19         ppp: function() {
20           /*調用父類的同名方法*/
21           this._super();
22           /*同時又能夠調用本身的方法*/
23           alert("好害羞 -，- ");
24         }
25       });
26 
27 
28       var xiaozhang = new Man(21, '小張', '121');
29       xiaozhang.ppp();
30     })()