ES6中class类用法实例浅析
更新时间：2017年04月06日 11:57:11 作者：布瑞泽的童话
这篇文章主要介绍了ES6中class类用法,结合实例形式分析了ES6中类的实现方法与相关语法使用技巧,需要的朋友可以参考下
本文实例讲述了ES6中class类用法。分享给大家供大家参考，具体如下：
类语法是ES6中新增的一个亮点特色。我们熟悉的JavaScript终于迎来了真正意义上的类。在之前，想要通过javascript来实现类，通常会采用如下构造函数的模式：
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ['Shelby','Court'];
}
Person.prototype = {
constructor:Person,
sayName: function(){
document.write(this.name);
}
}
然后通过实例化调用：
var person1 = new Person('lf',23,'software engineer');
person1.sayName();
下面看看使用ES6的类如何处理：
class Person {
constructor(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = [‘Shelby','Court']
}
sayName () {
document.write(this.name);
}
}
可以看到简便了不少。
Class语法的推出可不光光是为了简化噢，还有很多关键字。比如：
static关键字用来定义类的静态方法，静态方法是指那些不需要对类进行实例化，使用类名就可以直接访问的方法。静态方法经常用来作为工具函数：
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
static distance(a, b) {
const dx = a.x - b.x;
const dy = a.y - b.y;
return Math.sqrt(dx*dx + dy*dy);
}
}
const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
console.log(Point.distance(p1, p2));
但是需要注意的是，ES6中不能直接定义静态成员变量，但是我们可以通过另外的方式来实现：
static get baseUrl() {
return 'www.baidu.com'
}
在类语法推出之前，我们想要实现继承，必须通过prototype来指定对象，而现在我们可以通过extends关键字来实现继承：
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' makes a noise.');
}
}
class Dog extends Animal {
speak() {
console.log(this.name + ' barks.');
}
}
但是需要注意的一点就是，继承的原理还是在利用prototype这点没有变，只不过extends裹了一层语法糖而已。
希望本文所述对大家ECMAScript程序设计有所帮助。
相关文章
下面小编就为大家带来一篇Jil,高效的json序列化和反序列化库。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
js window.onload 加载多个函数和追加函数详解
本篇文章主要是对js window.onload 加载多个函数和追加函数进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
如果你无法理解博文在讲什么，请回顾前面的系列博文。文章比较深入，如有不对之处，望请指正，谢谢。2010-10-10
javascript中call,apply,callee,caller用法实例分析
这篇文章主要介绍了javascript中call,apply,callee,caller用法,结合实例形式分析了javascript中call,apply,callee,caller功能、使用方法及相关操作注意事项,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了微信小程序开发服务器获取数据列表渲染操作,结合实例形式分析了微信小程序后台获取服务器数据及前台列表渲染相关操作实现技巧,需要的朋友可以参考下2020-06-06
Uniapp中嵌入H5并在H5中跳转到APP的指定页面方法详解
Uniapp是一款基于Vue.js框架的跨平台开发工具,支持在一套代码中开发出运行于各大平台的应用程序,这篇文章主要给大家介绍了关于Uniapp中嵌入H5并在H5中跳转到APP的指定页面的相关资料,需要的朋友可以参考下2023-09-09
这篇文章主要为大家介绍了uniapp获取手机通知权限实现demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要为大家详细介绍了如何简单实现bootstrap导航效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
很多时候我们需要用图表来制作我们统计的数据直观的分析,所以我们可以用Echarts来制作图表,这篇文章主要给大家介绍了关于Echats图表大屏自适应的实现方法,需要的朋友可以参考下2021-10-10
这篇文章主要是对Eclipse去除js(JavaScript)验证错误进行了介绍。在Eclipse中，js文件常常会报错。可以通过如下几个步骤解决2014-02-02
最新评论