js繼承的概念


js里常用的如下兩種繼承方式:

原型鏈繼承(對象間的繼承)
類式繼承(構造函數間的繼承)

由於js不像java那樣是真正面向對象的語言,js是基於對象的,它沒有類的概念。所以,要想實現繼承,可以用js的原型prototype機制或者用applycall方法去實現

在面向對象的語言中,我們使用來創建一個自定義對象。然而js中所有事物都是對象,那么用什么辦法來創建自定義對象呢?這就需要用到js原型

我們可以簡單的把prototype看做是一個模版,新創建的自定義對象都是這個模版(prototype)的一個拷貝 (實際上不是拷貝而是鏈接,只不過這種鏈接是不可見,新實例化的對象內部有一個看不見的__Proto__指針,指向原型對象)。

js可以通過構造函數和原型的方式模擬實現類的功能。 另外,js類式繼承的實現也是依靠原型鏈來實現的。

原型式繼承與類式繼承

類式繼承是在子類型構造函數的內部調用超類型的構造函數。
嚴格的類式繼承並不是很常見,一般都是組合着用:

1 function Super(){
2     this.colors=["red","blue"];
3 }
4  
5 function Sub(){
6     Super.call(this);
7 }

原型式繼承是借助已有的對象創建新的對象,將子類的原型指向父類,就相當於加入了父類這條原型鏈

原型鏈繼承

為了讓子類繼承父類的屬性(也包括方法),首先需要定義一個構造函數。然后,將父類的新實例賦值給構造函數的原型。代碼如下:

 1 <script>
 2     function Parent(){
 3         this.name = 'mike';
 4     }
 5 
 6     function Child(){
 7         this.age = 12;
 8     }
 9     Child.prototype = new Parent();//Child繼承Parent,通過原型,形成鏈條
10 
11     var test = new Child();
12     alert(test.age);
13     alert(test.name);//得到被繼承的屬性
14     //繼續原型鏈繼承
15     function Brother(){   //brother構造
16         this.weight = 60;
17     }
18     Brother.prototype = new Child();//繼續原型鏈繼承
19     var brother = new Brother();
20     alert(brother.name);//繼承了Parent和Child,彈出mike
21     alert(brother.age);//彈出12
22 </script>

以上原型鏈繼承還缺少一環,那就是Object,所有的構造函數都繼承自Object。而繼承Object是自動完成的,並不需要我們自己手動繼承,那么他們的從屬關系是怎樣的呢?

確定原型和實例的關系

可以通過兩種方式來確定原型和實例之間的關系。操作符instanceofisPrototypeof()方法:

1 alert(brother instanceof Object)//true
2 alert(test instanceof Brother);//false,test 是brother的超類
3 alert(brother instanceof Child);//true
4 alert(brother instanceof Parent);//true

只要是原型鏈中出現過的原型,都可以說是該原型鏈派生的實例的原型,因此,isPrototypeof()方法也會返回true

js中,被繼承的函數稱為超類型(父類,基類也行),繼承的函數稱為子類型(子類,派生類)。使用原型繼承主要由兩個問題:
一是字面量重寫原型會中斷關系,使用引用類型的原型,並且子類型還無法給超類型傳遞參數。

偽類解決引用共享和超類型無法傳參的問題,我們可以采用“借用構造函數”技術

借用構造函數(類式繼承)

 1 <script>
 2     function Parent(age){
 3         this.name = ['mike','jack','smith'];
 4         this.age = age;
 5     }
 6 
 7     function Child(age){
 8         Parent.call(this,age);
 9     }
10     var test = new Child(21);
11     alert(test.age);//21
12     alert(test.name);//mike,jack,smith
13     test.name.push('bill');
14     alert(test.name);//mike,jack,smith,bill
15 </script>

借用構造函數雖然解決了剛才兩種問題,但沒有原型,則復用無從談起,所以我們需要原型鏈+借用構造函數的模式,這種模式稱為組合繼承

組合繼承

 1 <script>
 2     function Parent(age){
 3         this.name = ['mike','jack','smith'];
 4         this.age = age;
 5     }
 6     Parent.prototype.run = function () {
 7         return this.name  + ' are both' + this.age;
 8     };
 9     function Child(age){
10         Parent.call(this,age);//對象冒充,給超類型傳參
11     }
12     Child.prototype = new Parent();//原型鏈繼承
13     var test = new Child(21);//寫new Parent(21)也行
14     alert(test.run());//mike,jack,smith are both21
15 </script>

組合式繼承是比較常用的一種繼承方法,其背后的思路是 使用原型鏈實現對原型屬性和方法的繼承,而通過借用構造函數來實現對實例屬性的繼承。這樣,既通過在原型上定義方法實現了函數復用,又保證每個實例都有它自己的屬性。

call()的用法:調用一個對象的一個方法,以另一個對象替換當前對象。

 1 call([thisObj[,arg1[, arg2[, [,.argN]]]]])  

原型式繼承

這種繼承借助原型並基於已有的對象創建新對象,同時還不用創建自定義類型的方式稱為原型式繼承

 1 <script>
 2      function obj(o){
 3          function F(){}
 4          F.prototype = o;
 5          return new F();
 6      }
 7     var box = {
 8         name : 'trigkit4',
 9         arr : ['brother','sister','baba']
10     };
11     var b1 = obj(box);
12     alert(b1.name);//trigkit4
13 
14     b1.name = 'mike';
15     alert(b1.name);//mike
16 
17     alert(b1.arr);//brother,sister,baba
18     b1.arr.push('parents');
19     alert(b1.arr);//brother,sister,baba,parents
20 
21     var b2 = obj(box);
22     alert(b2.name);//trigkit4
23     alert(b2.arr);//brother,sister,baba,parents
24 </script>

原型式繼承首先在obj()函數內部創建一個臨時性的構造函數 ,然后將傳入的對象作為這個構造函數的原型,最后返回這個臨時類型的一個新實例。

寄生式繼承

這種繼承方式是把原型式+工廠模式結合起來,目的是為了封裝創建的過程。

1 <script>
2     function create(o){
3         var f= obj(o);
4         f.run = function () {
5             return this.arr;//同樣,會共享引用
6         };
7         return f;
8     }
9 </script>

組合式繼承的小問題

組合式繼承是js最常用的繼承模式,但組合繼承的超類型在使用過程中會被調用兩次;一次是創建子類型的時候,另一次是在子類型構造函數的內部

 1 <script>
 2     function Parent(name){
 3         this.name = name;
 4         this.arr = ['哥哥','妹妹','父母'];
 5     }
 6 
 7     Parent.prototype.run = function () {
 8         return this.name;
 9     };
10 
11     function Child(name,age){
12         Parent.call(this,age);//第二次調用
13         this.age = age;
14     }
15 
16     Child.prototype = new Parent();//第一次調用
17 </script>

以上代碼是之前的組合繼承,那么寄生組合繼承,解決了兩次調用的問題。

寄生組合式繼承

 1 <script>
 2     function obj(o){
 3         function F(){}
 4         F.prototype = o;
 5         return new F();
 6     }
 7     function create(parent,test){
 8         var f = obj(parent.prototype);//創建對象
 9         f.constructor = test;//增強對象
10     }
11 
12     function Parent(name){
13         this.name = name;
14         this.arr = ['brother','sister','parents'];
15     }
16 
17     Parent.prototype.run = function () {
18         return this.name;
19     };
20 
21     function Child(name,age){
22         Parent.call(this,name);
23         this.age =age;
24     }
25 
26     inheritPrototype(Parent,Child);//通過這里實現繼承
27 
28     var test = new Child('trigkit4',21);
29     test.arr.push('nephew');
30     alert(test.arr);//
31     alert(test.run());//只共享了方法
32 
33     var test2 = new Child('jack',22);
34     alert(test2.arr);//引用問題解決
35 </script>

call和apply

全局函數applycall可以用來改變函數中this的指向,如下:

 
 1  // 定義一個全局函數
 2     function foo() {
 3         console.log(this.fruit);
 4     }
 5     
 6     // 定義一個全局變量
 7     var fruit = "apple";
 8     // 自定義一個對象
 9     var pack = {
10         fruit: "orange"
11     };
12     
13     // 等價於window.foo();
14     foo.apply(window);  // "apple",此時this等於window
15     // 此時foo中的this === pack
16     foo.apply(pack);    // "orange"
17     


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM