javascript類式繼承模式#2——借用構造函數

時間 2019-11-17

標籤 javascript 繼承模式借用構造函數欄目 JavaScript 简体版

原文原文鏈接

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>類式繼承模式#2——借用構造函數</title>
 6 </head>
 7 
 8 <body>
 9 <script type="text/javascript">
10 
11     function Article(){
12         this.tags=['js','ajax'];
13     };
14     
15     Article.prototype.say=function(){return this.tags;}
16     
17 /***************************************/
18     var article=new Article();
19 
20     function BlogPost(){};
21     
22     BlogPost.prototype=article;
23     BlogPost.prototype.say=111;
24     
25     var blog=new BlogPost();
26 
27     function StaticPage(){
28         Article.call(this);
29     };
30     StaticPage.prototype={
31         x:100,
32         y:function(){
33             return this.x;
34         }
35     }
36     
37 var page = new StaticPage();
38 
39 
40 //BlogPost的原型繼承了new Article（），即便在BlogPost.prototype上添加屬性方法，事實上仍是給Article構造函數添加屬性方法
41 console.log(blog);
42 
43 //將父類Article中的方法屬性繼承過來，其實就是拷貝過來，佔爲己有，而且能夠覆蓋父類中的屬性方法，但並無將父類的原型鏈拷貝過來；
44 console.log(page);
45 
46 //構造函數模式缺點：調用父構造函數的原型,子構造函數能獲取到父構造函數的屬性和方法，但卻未繼承父構造函數的原型，即父構造函數__proto__所保存的連接沒有繼承給子構造函數。
47 
48 //構造函數模式優勢：能夠複製父構造函數的屬性和方法，並不會出現子構造函數覆蓋父構造函數的意外風險，能實現多重繼承，能夠父子構造函數之間傳遞參數。
49 
50 
51 </script>
52 </body>
53 </html>