JS继承三

3,继承工具函数三

?
1
2
3
4
5
6
7
/**
  * @param {Function} subCls
  * @param {Function} superCls
  */
function  extend(subCls,superCls) {
     subCls.prototype = new  superCls(); 
}

父类,按原型方式写,即属性和方法都挂在原型上。

?
1
2
3
4
5
6
7
/**
  *  父类Person
  */
function  Person(){}
Person.prototype.nationality = 'China' ;
Person.prototype.getNationality = function () { return  this .nationality;}
Person.prototype.setNationality = function (n) { this .nationality = n;}

子类继承与父类

?
1
2
function  Man() {}
extend(Man,Person);

继承父类的属性和方法后,再添加子类自有属性,方法 

?
1
2
3
Man.prototype.name = 'jack' ;
Man.prototype.getName = function () { return  this .name;}
Man.prototype.setName = function (n) { this .name=n;}

测试如下,

?
1
2
3
var  m = new  Man();
console.log(m);
console.log(m instanceof  Person);

可以看到这种写类方式,继承方式完全采用原型机制。


4,继承工具函数四

这种方式是目前比较流行的,51ditu网站的开发就是按照这种模式的。 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
  * @param {Function} subCls 子类
  * @param {Function} superCls 父类
  */
function  extend(subCls,superCls) { 
     //暂存子类原型
     var  sbp = subCls.prototype;
     //重写子类原型--原型继承
     subCls.prototype = new  superCls();
     //重写后一定要将constructor指回subCls
     subCls.prototype.constructor = subCls;
     //还原子类原型
     for ( var  atr in  sbp) {
         subCls.prototype[atr] = sbp[atr];
     }
     //暂存父类 
     subCls.supr = superCls;
}

按 构造函数+原型 方式写类,即属性挂在this上,方法挂在prototype上。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
  *  父类Person
  */
function  Person(nationality){
     this .nationality = nationality;
}
Person.prototype.getNationality = function () { return  this .nationality;}
Person.prototype.setNationality = function (n) { this .nationality = n;}
 
/**
  *  子类Man
  */
function  Man(nationality,name) {
     Man.supr.call( this ,nationality); //很重要的一句,调用父类构造器
     this .name = name;
}
Man.prototype.getName = function () { return  this .name;}
Man.prototype.setName = function (n) { this .name=n;}

注意子类Man中要显示的调用父类构造器已完成父类的属性/字段拷贝。

extend调用,创建Man的实例

?
1
2
3
4
5
extend(Man,Person);
var  m = new  Man( 'USA' , 'jack' );
console.log(m);
m.setName( 'lily' );
console.log(m.name);

你可能感兴趣的:(JavaScript,继承,原型继承)