javascript继承，原型继承，借用构造函数继承，混合继承

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

<code>&lt;%@ page language=</code><code>"java"</code> <code>import=</code><code>"java.util.*"</code> <code>pageEncoding=</code><code>"UTF-8"</code><code>%&gt;</code>

<code>&lt;%</code>

<code>String path = request.getContextPath();</code>

<code>String basePath = request.getScheme()+</code><code>"://"</code><code>+request.getServerName()+</code><code>":"</code><code>+request.getServerPort()+path+</code><code>"/"</code><code>;</code>

<code>%&gt;</code>

<code>&lt;!DOCTYPE HTML PUBLIC </code><code>"-//W3C//DTD HTML 4.01 Transitional//EN"</code><code>&gt;</code>

<code>&lt;html&gt;</code>

<code>  </code><code>&lt;head&gt;</code>

<code>    </code><code>&lt;base href=</code><code>"&lt;%=basePath%&gt;"</code><code>&gt;</code>

<code>    </code> 

<code>    </code><code>&lt;title&gt;My JSP </code><code>'test3.jsp'</code> <code>starting page&lt;/title&gt;</code>

<code>    </code><code>&lt;meta http-equiv=</code><code>"pragma"</code> <code>content=</code><code>"no-cache"</code><code>&gt;</code>

<code>    </code><code>&lt;meta http-equiv=</code><code>"cache-control"</code> <code>content=</code><code>"no-cache"</code><code>&gt;</code>

<code>    </code><code>&lt;meta http-equiv=</code><code>"expires"</code> <code>content=</code><code>"0"</code><code>&gt;    </code>

<code>    </code><code>&lt;meta http-equiv=</code><code>"keywords"</code> <code>content=</code><code>"keyword1,keyword2,keyword3"</code><code>&gt;</code>

<code>    </code><code>&lt;meta http-equiv=</code><code>"description"</code> <code>content=</code><code>"This is my page"</code><code>&gt;</code>

<code>    </code><code>&lt;!--</code>

<code>    </code><code>&lt;link rel=</code><code>"stylesheet"</code> <code>type=</code><code>"text/css"</code> <code>href=</code><code>"styles.css"</code><code>&gt;</code>

<code>    </code><code>--&gt;</code>

<code>    </code><code>&lt;script src=</code><code>"js/jquery-2.1.1.min.js"</code><code>&gt;&lt;/script&gt;</code>

<code>    </code><code>&lt;script type=</code><code>"application/javascript"</code><code>&gt;</code>

<code>        </code><code>//js中实现继承，采用原型链的概念</code>

<code>        </code><code>//1.构造函数.prototype=原型对象</code>

<code>        </code><code>//2.原型对象.constructor=构造函数(模板)</code>

<code>        </code><code>//3.原型对象.isPropertyOf(实例对象)判断实例对象的原型是不是当前对象</code>

<code>        </code><code>//4.构造函数，实例对象(类和实例)</code>

<code>        </code> 

<code>        </code><code>//父类构造函数 sup</code>

<code>        </code><code>function</code> <code>Sup(name){</code>

<code>            </code><code>this</code><code>.name=name;</code>

<code>        </code><code>}</code>

<code>        </code><code>Sup.prototype={</code>

<code>            </code><code>constructor:Sup,</code>

<code>            </code><code>sayName:</code><code>function</code><code>(){</code>

<code>                </code><code>alert(</code><code>this</code><code>.name);</code>

<code>            </code><code>}</code>

<code>        </code><code>//子类构造函数  Sub</code>

<code>        </code><code>function</code> <code>Sub(age){</code>

<code>            </code><code>this</code><code>.age=age;</code>

<code>        </code><code>//如果让子类的原型对象，结果会怎么样？(实行js继承)</code>

<code>        </code><code>//此时的原型对象包含一个指向另一个原型的指针</code>

<code>        </code><code>//相应的；另一个原型中也包含着一个指向另一个构造函数的指针</code>

<code>        </code><code>//子类的原型对象的构造器变成了父类的构造器</code>

<code>//      Sub.prototype=new Sup();</code>

<code>//      alert(Sub.prototype.constructor);        //父类构造器</code>

<code>        </code><code>Sub.prototype=</code><code>new</code> <code>Sup(</code><code>'张三'</code><code>);</code>

<code>        </code><code>var</code> <code>sub1=</code><code>new</code> <code>Sub();</code>

<code>        </code><code>alert(sub1.name);             </code><code>//张三</code>

<code>        </code><code>sub1.sayName();</code>

<code>    </code><code>&lt;/script&gt; </code>

<code>  </code><code>&lt;/head&gt;</code>

<code>  </code> 

<code>  </code><code>&lt;body&gt;</code>

<code>    </code><code>This is my JSP page. &lt;br&gt;</code>

<code>  </code><code>&lt;/body&gt;</code>

<code>&lt;/html&gt;</code>

三种继承方式：

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

<code>        </code><code>//三种继承方式</code>

<code>        </code><code>//原型继承</code>

<code>        </code><code>/*</code>

<code>        </code><code>function Person(name,age){</code>

<code>            </code><code>this.name=name;</code>

<code>            </code><code>this.age=age;</code>

<code>        </code><code>//父类原型对象属性</code>

<code>        </code><code>Person.prototype.id=10;</code>

<code>        </code><code>function Boy(sex){</code>

<code>            </code><code>this.sex=sex;</code>

<code>        </code><code>Boy.prototype=new Person('张三',21);</code>

<code>        </code><code>var b=new Boy();</code>

<code>        </code><code>alert(b.id);                //10</code>

<code>        </code><code>//原型继承的特点：既继承了父类的模板，又继承了父类的原型对象</code>

<code>        </code><code>*/</code>

<code>        </code><code>//类继承：只继承模板，不继承原型对象(借用构造函数的方式继承)</code>

<code>        </code><code>function Boy(name,age,sex){</code>

<code>            </code><code>Person.call(this,name,age);          //绑定对象</code>

<code>        </code><code>var b=new Boy('张三',23,'男');</code>

<code>        </code><code>alert(b.age);</code>

<code>        </code><code>alert(b.name);</code>

<code>        </code><code>alert(b.sex);</code>

<code>        </code><code>alert(b.age);         //undefined   父类原型对象并没有继承     </code>

<code>        </code><code>//原型继承+借用构造函数继承=混合继承</code>

<code>        </code><code>function</code> <code>Person(name,age){</code>

<code>        </code><code>Person.prototype.sayName=</code><code>function</code><code>(){alert(</code><code>this</code><code>.name);}</code>

<code>        </code><code>function</code> <code>Boy(name,age,sex){</code>

<code>            </code><code>Person.call(</code><code>this</code><code>,name,age);           </code><code>//1.借用构造函数继承</code>

<code>            </code><code>this</code><code>.sex=sex;</code>

<code>        </code><code>//只剩下父类的实例和弗雷德原型对象的关系了</code>

<code>        </code><code>Boy.prototype=</code><code>new</code> <code>Person();                </code><code>//2.原型继承，继承父类的原型对象</code>

<code>        </code><code>var</code> <code>boy=</code><code>new</code> <code>Boy(</code><code>'张三'</code><code>,21,</code><code>'男'</code><code>);</code>

<code>        </code><code>alert(boy.id);</code>

<code>        </code><code>boy.sayName();</code>

 本文转自 matengbing 51CTO博客，原文链接:http://blog.51cto.com/matengbing/1879585