javascript 계승 실현 3 가지 방식: 원형 계승, 차용 구조 함수 계승, 조합 계승, 아 날로 그 extends 방법 계승...

 javascript 에서 계승 을 실현 하 는 세 가지 방식: 원형 계승, 차용 구조 함수 계승, 혼합 계승:

  1 /*
  2     js     
  3     
  4     js                   ：
  5         1     .prototype =     
  6         2     .constructor =     （  ）
  7         3     .isPrototypeOf(    )                  
  8         4                                
  9 */
 10 
 11 
 12 /*
 13 1     
 14                                 
 15              ：
 16         1                   Son.prototype   new Father()
 17         2         ，              
 18         3                     Son.prototype.constructor   Father
 19         4                         Son.prototype.prototype  Father.prototype
 20            ：
 21                                      
 22       ：                      ，                 。
 23 */
 24 
 25 //      
 26 function Father(name){
 27     this.name = name;
 28 }
 29 //      
 30 Father.prototype={
 31     constructor: Father,
 32     id:10,
 33     sayName:function(){
 34         alert(this.name);
 35     }
 36 };
 37 
 38 //      
 39 function Son(age){
 40     this.age = age;
 41 }
 42 //              
 43 Son.prototype = new Father(" ");
 44 
 45 //                  
 46 var s1 = new Son(18);
 47 //s1.sayName();    // 
 48 //alert(s1.age);    //18        
 49 
 50 /*
 51            ：
 52                                      
 53       ：                      ，                 。
 54 */
 55 
 56 
 57 
 58 
 59 /*
 60 2    （      ）           ，             
 61       call   apply      ，              
 62 */
 63 //      
 64 function Father(name){
 65     this.name = name;
 66 }
 67 //                            
 68 Father.prototype.id = 10;
 69 
 70 //      
 71 function Son(name,age){
 72     //name                                    
 73     Father.call(this,name);
 74     this.age = age;
 75 }
 76 //                        
 77 var s2 = new Son("z3",18);
 78 //alert(s2.name);    //z3              
 79 //alert(s2.age);    //18         
 80 
 81 /*
 82        （      ）    ：
 83           ：                       
 84           ：               
 85 */
 86 
 87 
 88 /*
 89 3     ：                   
 90       ：
 91           ：1                       
 92                2                
 93           ：           ，   call              
 94                            ，          
 95 */
 96 //  
 97 function Father(name){
 98     this.name = name;
 99 }
100 //       
101 Father.prototype = {
102     constructor:Father,
103     id:10,
104     sayName:function(){
105         alert(this.name);
106     }
107 };
108 //  
109 function Son(name,age){
110     //                           
111     Father.call(this,name);
112     this.age = age;
113 }
114 //          ，                      
115 Son.prototype = new Father();
116 
117 //         
118 var s3 = new Son("l4",20);
119 //alert(s3.name);    //    
120 //alert(s3.id);    //         
121 //alert(s3.age);    //     
122 //s3.sayName();    //          
123 /*
124            ：
125           ：1                       
126                2                
127           ：           ，   call              
128                            ，          
129 */

 
 
 
그러나 위의 세 가지 방식 은 혼합 계승 이라도 단점 이 있 습 니 다. 다음은 js 로 extends 의 계승 자 를 모 의 하여 아버지 류 를 중복 계승 하지 않 는 구조 함 수 를 실현 합 니 다.

 1 /*
 2 javascript  extends  ，
 3       ：
 4         1                  
 5         2              
 6         3             
 7 */
 8 
 9 //1       extends                     
10 function extend(son,father){
11     //                       
12     var f = new Function(); //     ，                     
13     f.prototype = father.prototype;    //              
14     son.prototype = new f();    //             ，            ，                   
15     //       superClass           ，                           
16     son.superClass = father.prototype;
17     //                                  
18     if(father.prototype.constructor == Object.prototype.constructor){
19         father.prototype.constructor = father;
20     }
21 }
22 //2   
23 function Father(name){
24     this.name = name;
25 } 
26 //       
27 Father.prototype = {
28     constructor: Father,
29     sayName:function(){
30         alert(this.name);
31     }
32 };
33 
34 
35 //3   
36 function Son(name,age){
37     //      ：               
38     // Father.call(this , name);       ，    ，     ，  extentds    ，           
39     Son.superClass.constructor.call(this , name);    //Son.superClass        ，consturctor        
40     this.age = age;
41 }
42 //        
43 //Son.prototype = new Father(); //               ，               ，               
44 //                                    
45 
46 
47 
48 extend(Son,Father);
49 
50 
51 
52 //    
53 var s4 = new Son("haha",33);
54 alert(s4.name);    //haha         
55 alert(s4.age);    //33      
56 s4.sayName();    //haha          
57 //      
58 s4.sayName = function(){
59     alert("hello i am son");
60 };
61 s4.sayName();    //hello i am son           sayName
62 //                                   
63 Son.superClass.sayName.call(s4);    //haha
64     
65     
66     

 
다음으로 전송:https://www.cnblogs.com/Lin-Yi/p/7446841.html