js继承

最新推荐文章于 2024-06-14 14:37:58 发布

转载最新推荐文章于 2024-06-14 14:37:58 发布 · 64 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuyuj/p/4525740.html

js继承有5种实现方式：

继承第一种方式：对象冒充

 1 function Parent(username){ 
 2    this.username = username; 
 3    this.hello = function(){ 
 4        document.write(this.username);
 5    } 
 6 } 
 7 function Child(username,password){ 
 8    //通过以下3行实现将Parent的属性和方法追加到Child中，从而实现继承 
 9    //第一步：this.method是作为一个临时的属性，并且指向Parent所指向的对象， 
10    //第二步：执行this.method方法，即执行Parent所指向的对象函数 
11    //第三步：销毁this.method属性，即此时Child就已经拥有了Parent的所有属性和方法 
12    this.method = Parent; 
13    this.method(username);//最关键的一行 
14    delete this.method; 
15 
16    this.password = password; 
17    this.world = function(){ 
18        document.write(this.password);
19    } 
20 } 
21 var parent = new Parent("zhangsan"); 
22 var child = new Child("lisi","123456"); 
23 parent.hello(); 
24 child.hello(); 
25 child.world();

继承第二种方式：call()方法方式

call方法是Function类中的方法
call方法的第一个参数的值赋值给类(即方法)中出现的this
call方法的第二个参数开始依次赋值给类(即方法)所接受的参数

 1 function test(str){ 
 2    document.write(this.name + " " + str);
 3 } 
 4 var object = new Object(); 
 5 object.name = "zhangsan"; 
 6 test.call(object,"langsin");//此时，第一个参数值object传递给了test类(即方法)中出现的this，而第二个参数"langsin"则赋值给了test类(即方法)的str 
 7 
 8 function Parent(username){ 
 9    this.username = username; 
10       this.hello = function(){ 
11          document.write(this.username);
12       } 
13    } 
14 function Child(username,password){ 
15    Parent.call(this,username);    
16       this.password = password; 
17          this.world = function(){ 
18             document.write(this.password);
19          } 
20       } 
21     var parent = new Parent("zhangsan"); 
22     var child = new Child("lisi","123456"); 
23     parent.hello(); 
24     child.hello(); 
25     child.world();

继承的第三种方式：apply()方法方式

apply方法接受2个参数:
A、第一个参数与call方法的第一个参数一样，即赋值给类(即方法)中出现的this
B、第二个参数为数组类型，这个数组中的每个元素依次赋值给类(即方法)所接受的参数

 1 function Parent(username){ 
 2    this.username = username; 
 3    this.hello = function(){ 
 4       document.write(this.username);
 5    } 
 6 } 
 7 function Child(username,password){ 
 8    Parent.apply(this,new Array(username));   
 9    this.password = password; 
10    this.world = function(){ 
11       document.write(this.password);
12    } 
13 } 
14 var parent = new Parent("zhangsan"); 
15 var child = new Child("lisi","123456"); 
16 parent.hello(); 
17 child.hello(); 
18 child.world();

继承的第四种方式：原型链方式，即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child，从而实现了继承

 1 function Person(){ 
 2 } 
 3 Person.prototype.hello = "hello"; 
 4 Person.prototype.sayHello = function(){ 
 5    document.write(this.hello);
 6 } 
 7   
 8 function Child(){ 
 9    } 
10 //这行的作用是：将Parent中将所有通过prototype追加的属性和方法都追加到Child，从而实现了继承 
11 Child.prototype = new Person();
12 Child.prototype.world = "world"; 
13 Child.prototype.sayWorld = function(){ 
14    document.write(this.world);
15 }   
16 var c = new Child(); 
17 c.sayHello(); 
18 c.sayWorld();

继承的第五种方式：混合方式，混合了call方式、原型链方式

 1 function Parent(hello){ 
 2    this.hello = hello; 
 3 } 
 4 Parent.prototype.sayHello = function(){ 
 5    document.write(this.world);
 6 } 
 7 function Child(hello,world){ 
 8    Parent.call(this,hello);//将父类的属性继承过来 
 9    this.world = world;//新增一些属性 
10 } 
11 //将父类的方法继承过来
12 Child.prototype = new Parent(); 
13 //新增一些方法 
14 Child.prototype.sayWorld = function(){
15    document.write(this.world);
16 } 
17 var c = new Child("zhangsan","lisi"); 
18 c.sayHello(); 
19 c.sayWorld();