• 104498

    文章

  • 803

    评论

  • 12

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

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

撸了今年阿里、腾讯和美团的面试,我有一个重要发现.......>>

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

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

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


导读

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 - 粘贴

上文:JavaScript统计数据处理(4) - 条件和循环

下文:JavaScript统计数据处理(6)- ES6数组新增方法


695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

0条评论

Loading...


自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客