JavaScript统计数据处理（5）- 类的封装和继承

JavaScript是一种广泛使用网页编程语言，
在浏览器中运用JavaScript技术处理统计数据具有最佳的推广传播效果

类是具有共同属性和方法的集合。JS是一门面向对象语言，其对象作为对象是用prototype属性来模拟和封装的。

JS的类其实是一个函数function，由于不是典型的面向对象的类，因此也叫伪类。理解JS的类，需要对JS里的function有一个比较好的认识。首先，function本身就是一个对象object，可以当作函数的参数，也可以当作返回值，跟普通的object无异。

导读：

• 构造函数法
• object.create()法
• ES6 Class方法

1、构造函数法

 [返回]

console.clear();
//构造函数，得到一个oString类
var oString = function(str){  
     this.content = str;
};
var name = new oString("Lei");  //建立一个对象实例
var addr = new oString("Lijun");
console.log(name.content + " live in " + addr.content);
name.age = oString.prototype;   //name对象添加age属性
name.age = 18;
console.log(name);
//为oString添加一个gender属性
oString.prototype.gender = "F";
//为oString添加一个toString方法
oString.prototype.toString = function(){  
    return this.content;
};
console.log(name.toString());  //Lei，对象实例继承了toString方法
console.log(name.gender);      //Lei，对象实例继承了gender属性
console.log(addr.toString());  //Lijun
console.log(addr.gender);      //F

2、object.create()法

 [返回]

console.clear();
var Person = {
      name: 'pawn',
      sayHello: function() {
          console.log(this.name);
      }
  }
Person.age = 28;  //原型添加属性，注意不用prototype
Person.gender = "F";
Person.toString = function(str){  //原型添加方法 
    return this.name + " " +str +".";
};
var p = Object.create(Person);  //创建对象实例
console.log(p.age);  //28
p.sayHello();  //pawn
console.log(p.toString("hello"));  //pawn hello.
console.log(p);
console.log(Person);

3、ES6 Class方法

 [返回]

console.clear();
//先用class关键字定义一个类（父类）
class Point{
    constructor(x, y){  //属性构造
        this.x = x;
        this.y = y;
    }
    toString(){  //创建方法
        return '点坐标: ' + this.x + ',' + this.y;
    }
}
let fp = new Point(12, 34);
console.log(fp.x); //x坐标: 12
console.log(fp.toString()); //点坐标: 12,34
//子类的声明
class ColoredPoint extends Point{
    constructor(x, y, color){  ////属性构造
        super(x, y);  //x,y继承父类
        this.color = color;  //为子类定义颜色属性
    }
    toString(){  //改写方法（super表示父类）
        return this.color + super.toString();
    }
}
let sp = new ColoredPoint(56, 78, '红色');
console.log(sp.x);  //56
console.log(sp.color);  //红色
console.log(sp.toString()); //"红色点坐标: 56,78"

类之间的继承可以通过extends关键字实现，并且子类的构造函数中出现了一个新的关键字super，没有它的话，就无法继承父类的实例属性（子类中有constructor，内部就要有super）。super指代父类的实例（父类的this对象）这里的super(x,y)就是调用父类的构造函数 ，super.toString()就是调用父类toString()方法。

本文介绍了几种常用的JS类的继承和封装基本用法，推荐使用较新的ES6 Class方法。JS类的继承和封装技术可以大大简化统计数据分析工作代码，在代码重复使用和灵活扩展方面提供高效规则，是开发大型统计数据分析项目的重要工具。

提示：本页中JS脚本代码可复制粘贴到JS代码运行窗口调试体验； 文本编辑快捷键：Ctrl+A - 全选；Ctrl+C - 复制； Ctrl+X - 剪切；Ctrl+V - 粘贴