码迷,mamicode.com
首页 > Web开发 > 详细

js的几种继承方式

时间:2018-03-12 22:53:22      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:other   not   思路   实例   log   pos   cal   构造函数   结果   

1.1借用构造函数

 1  function supertype(){
 2              this.colors = ["red","blue","green"];
 3          }
 4          function subtype(){
 5              supertype.call(this);
 6          }
 7          
 8          var instance1 = new subtype();
 9          instance1.colors.push(‘black‘);
10          console.log(instance1.colors); 
11          var instance2 = new subtype();
12          console.log(instance2.colors); 

技术分享图片

1.2.相对于原型链而言,借用构造函数有一个很大的优势,即可以在子类型构造函数中向超类型构造函 数传递参数。

 1 function supertype(name){
 2              this.name = name;
 3          }
 4          function subtype(){
 5              supertype.call(this,"gaoxuerong");
 6              this.age = 21;
 7          }
 8          var instance1 = new subtype();         
 9          console.log(instance1.name);          
10          console.log(instance1.age); 

技术分享图片

2.组合继承:指的是将原型链和借用构造函数的 技术组合到一块,从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性和方 法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数 复用,又能够保证每个实例都有它自己的属性.

 1  function supertype(name){
 2              this.name = name;
 3              this.colors = [‘red‘,‘green‘,‘black‘];
 4          }
 5          supertype.prototype.sayname = function(){
 6              console.log(this.name)
 7          }
 8          function subtype(name,age){
 9              supertype.call(this,name);
10              this.age = age;
11          }
12          subtype.prototype  =  new supertype();
13          subtype.prototype.constructor  =   subtype;
14          subtype.prototype.sayage  =  function(){
15              console.log(this.age);
16          }
17          var instance1 = new subtype(‘gaoxuerong‘,21);
18          instance1.colors.push(‘green‘);
19           console.log(instance1.colors); 
20          console.log(instance1.sayname());          
21          console.log(instance1.sayage()); 
22           var instance2 = new subtype(‘gxr‘,22);
23          console.log(instance2.colors);          
24           console.log(instance2.sayname());          
25          console.log(instance2.sayage()); 

技术分享图片

 

3.原型式继承:

 1 function object(o){
 2              function F(){}
 3              F.prototype = o;
 4              return new F();
 5          }
 6          var person = {
 7              name:‘gxr‘,
 8              friends:[‘1‘,‘2‘,‘3‘]
 9          }
10          var anotherperson = object(person);
11          anotherperson.friends.push(‘4‘);
12          console.log(anotherperson.name); 
13          console.log(anotherperson.friends);
14           var yetanotherperson = object(person);
15          yetanotherperson.name = ‘g‘;
16          yetanotherperson.friends.push(‘5‘);
17          console.log(yetanotherperson.name);
18          console.log(yetanotherperson.friends);

技术分享图片

4.寄生式继承

 1 function object(o){
 2              function F(){}
 3              F.prototype = o;
 4              return new F();
 5          }
 6          function createanother(original){
 7              var clone = object(original);
 8              clone.sayHi = function(){
 9                  console.log(‘hi‘);
10              }
11              return clone;
12          }
13          var person = {
14              name:‘gxr‘,
15              friends:[‘1‘,‘2‘,‘3‘]
16          }
17          var anotherperson = createanother(person);
18          anotherperson.sayHi();

5.寄生组合式继承:所谓寄生组合式继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。其背 后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型 原型的一个副本而已。本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型 的原型。

 

 1 function object(o){
 2              function F(){}
 3              F.prototype = o;
 4              return new F();
 5          }
 6          function inheritprototype(subtype,supertype){
 7              var prototype = object(supertype.prototype);
 8              prototype.constructor = subtype;
 9              subtype.prototype = prototype;
10          }
11          function supertype(name){
12              this.name = name;
13              this.colors = [‘red‘,‘green‘,‘black‘];
14          }
15          supertype.prototype.sayname = function(){
16              console.log(this.name)
17          }
18          function subtype(name,age){
19              supertype.call(this,name);
20              this.age = age;
21          }
22          inheritprototype(subtype,supertype);
23          subtype.prototype.sayage  =  function(){
24              console.log(this.age);
25          }

 

js的几种继承方式

标签:other   not   思路   实例   log   pos   cal   构造函数   结果   

原文地址:https://www.cnblogs.com/gaoxuerong123/p/8552222.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!