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程序设计有所帮助。
相关文章
躲避这些会改变原数组JavaScript数组方法让开发流畅无阻
JavaScript中有些数组的操作方法并不符合我们预期，容易导致想象不到的结果，因此，为避免这种情况的发生，本文将介绍哪些原生数组方法能改变原数组以及我对于如何更好地使用数组方法的建议2023-05-05
这篇文章主要介绍了JavaScript数组去重和扁平化函数，数组扁平化又称数组降维，下面文章围绕数组去重和扁平化函数得相关资料展开内容,需要的朋友可以参考一下2021-12-12
如何一个load 加载完成后把图片一次性显示出来，下面有个不错的方法，希望对大家有所帮助2014-02-02
这篇文章主要介绍了express+mockjs实现模拟后台数据发送功能,需要的朋友可以参考下2018-01-01
一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的，刚开始的时候是用CSS样式直接定义好层的位置，但是当页面很长的时候，或是浏览器窗口大小不是固定的时候就不能正确的显示，所以只好用JS来控制DIV的显示位置。2008-06-06
这篇文章主要为大家详细介绍了微信小程序实现留言板功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要为大家介绍了JS使用虚拟列表查看微信聊天记录功能技巧实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
详解设置Webstorm 利用babel将ES6自动转码成ES5
这篇文章主要介绍了详解设置Webstorm 利用babel将ES6自动转码成ES5，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
DOM与事件是JavaScript最核心的组成部分之一，他们赋予了页面无限的想象空间，你根本无法离开他们，否则js将寸步难行。本文给大家分享我对javascript dom事件的了解，对javascript dom事件相关知识感兴趣的朋友一起学习吧2015-12-12
这篇文章主要介绍了Javascript编程中几种继承方式比较分析,较为详细的分析了JavaScript继承的原理并对比分析了几种继承方式的实现技巧,需要的朋友可以参考下2015-11-11
最新评论