TH889
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  2 随笔 :: 0 文章 :: 0 评论 :: 0 Trackbacks
js继承有5种实现方式：
  1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2<html>
  3 <head>
  4  <title> New Document </title>
  5  <meta name="Generator" content="EditPlus">
  6  <meta name="Author" content="">
  7  <meta name="Keywords" content="">
  8  <meta name="Description" content="">
  9  <script type = "text/javaScript">
 10  js继承有5种实现方式： 
 111、继承第一种方式：对象冒充 
 12  function Parent(username){ 
 13    this.username = username; 
 14    this.hello = function(){ 
 15      alert(this.username); 
 16    } 
 17  } 
 18  function Child(username,password){ 
 19    //通过以下3行实现将Parent的属性和方法追加到Child中，从而实现继承 
 20    //第一步：this.method是作为一个临时的属性，并且指向Parent所指向的对象， 
 21    //第二步：执行this.method方法，即执行Parent所指向的对象函数 
 22    //第三步：销毁this.method属性，即此时Child就已经拥有了Parent的所有属性和方法 
 23    this.method = Parent; 
 24    this.method(username);//最关键的一行 
 25    delete this.method; 
 26
 27    this.password = password; 
 28    this.world = function(){ 
 29      alert(this.password); 
 30    } 
 31  } 
 32  var parent = new Parent("zhangsan"); 
 33  var child = new Child("lisi","123456"); 
 34  parent.hello(); 
 35  child.hello(); 
 36  child.world(); 
 37
 382、继承第二种方式：call()方法方式 
 39  call方法是Function类中的方法 
 40  call方法的第一个参数的值赋值给类(即方法)中出现的this 
 41  call方法的第二个参数开始依次赋值给类(即方法)所接受的参数 
 42
 43  function test(str){ 
 44    alert(this.name + " " + str); 
 45  } 
 46  var object = new Object(); 
 47  object.name = "zhangsan"; 
 48  test.call(object,"langsin");//此时，第一个参数值object传递给了test类(即方法)中出现的this，而第二个参数"langsin"则赋值给了test类(即方法)的str
 49 
 50  function Parent(username){ 
 51    this.username = username; 
 52    this.hello = function(){ 
 53      alert(this.username); 
 54    } 
 55  } 
 56  function Child(username,password){ 
 57    Parent.call(this,username); 
 58    
 59    this.password = password; 
 60    this.world = function(){ 
 61      alert(this.password); 
 62    } 
 63  } 
 64  var parent = new Parent("zhangsan"); 
 65  var child = new Child("lisi","123456"); 
 66  parent.hello(); 
 67  child.hello(); 
 68  child.world(); 
 69
 703、继承的第三种方式：apply()方法方式 
 71  apply方法接受2个参数， 
 72    A、第一个参数与call方法的第一个参数一样，即赋值给类(即方法)中出现的this 
 73    B、第二个参数为数组类型，这个数组中的每个元素依次赋值给类(即方法)所接受的参数 
 74
 75  function Parent(username){ 
 76    this.username = username; 
 77    this.hello = function(){ 
 78      alert(this.username); 
 79    } 
 80  } 
 81  function Child(username,password){ 
 82    Parent.apply(this,new Array(username)); 
 83    
 84    this.password = password; 
 85    this.world = function(){ 
 86      alert(this.password); 
 87    } 
 88  } 
 89  var parent = new Parent("zhangsan"); 
 90  var child = new Child("lisi","123456"); 
 91  parent.hello(); 
 92  child.hello(); 
 93  child.world(); 
 94
 954、继承的第四种方式：原型链方式，即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child，从而实现了继承 
 96  function Person(){ 
 97  } 
 98  Person.prototype.hello = "hello"; 
 99  Person.prototype.sayHello = function(){ 
100    alert(this.hello); 
101  } 
102  
103  function Child(){ 
104  } 
105  Child.prototype = new Person();//这行的作用是：将Parent中将所有通过prototype追加的属性和方法都追加到Child，从而实现了继承
106   Child.prototype.world = "world"; 
107  Child.prototype.sayWorld = function(){ 
108    alert(this.world); 
109  } 
110  
111  var c = new Child(); 
112  c.sayHello(); 
113  c.sayWorld(); 
114
1155、继承的第五种方式：混合方式 
116  混合了call方式、原型链方式 
117
118  function Parent(hello){ 
119    this.hello = hello; 
120  } 
121  Parent.prototype.sayHello = function(){ 
122    alert(this.hello); 
123  } 
124
125  function Child(hello,world){ 
126    Parent.call(this,hello);//将父类的属性继承过来 
127    this.world = world;//新增一些属性 
128  } 
129
130  Child.prototype = new Parent();//将父类的方法继承过来 
131
132  Child.prototype.sayWorld = function(){//新增一些方法 
133    alert(this.world); 
134  } 
135
136  var c = new Child("zhangsan","lisi"); 
137  c.sayHello(); 
138  c.sayWorld(); 
139 </script>
140 </head>
141 <body>
142  
143 </body>
144</html>
145
posted on 2012-08-13 23:09 TH 阅读(140) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。
网站导航: