╰.yuyu.*

博客园 首页 新随笔 联系 订阅 管理

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();

 

posted on 2015-05-24 13:35  ╰.yuyu.*  阅读(159)  评论(0编辑  收藏  举报