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程序设计有所帮助。

您可能感兴趣的文章:

基于d3.js/neovis.js/neod3.js实现链接neo4j图形数据库的图像化显示功能
neovis.js 由vis.js支持的图形可视化以及来自Neo4j的数据。这篇文章主要介绍了基于d3.js/neovis.js/neod3.js实现链接neo4j图形数据库的图像化显示功能,需要的朋友可以参考下
2022-02-02
JavaScript查看数据返回值的方法
console.log()、alert() 都是JavaScript中用于在开发过程中输出信息或向用户显示消息的不同方法,它们的主要区别在于目的、使用场景以及展示方式,本文将给大家介绍JavaScript 中怎么看数据返回值,需要的朋友可以参考下
2024-07-07
js原生日历的实例(推荐)
下面小编就为大家带来一篇js原生日历的实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
javascript表格隔行变色加鼠标移入移出及点击效果的方法
这篇文章主要介绍了javascript表格隔行变色加鼠标移入移出及点击效果的方法,涉及javascript实现隔行变色及鼠标点击效果的相关技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
VUE基于NUXT的SSR 服务端渲染
这篇文章主要介绍了VUE基于NUXT的SSR 服务端渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
JavaScript实现获取img的原始尺寸的方法详解
在微信小程序开发时，它的image标签有一个默认高度，这样你的图片很可能出现被压缩变形的情况，所以就需要获取到图片的原始尺寸对image的宽高设置，本文就来分享一下JavaScript实现获取img的原始尺寸的方法吧
2023-03-03
AJAX使用了UpdatePanel后无法使用alert弹出脚本
今天在做项目的时候发现个问题。。使用UpdatePanel后alert脚本就要报错了。
2010-04-04
JS实现前端分页效果
这篇文章主要为大家详细介绍了JS实现前端分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
JS实现仿PS的调色板效果完整实例
这篇文章主要介绍了JS实现仿PS的调色板效果,结合完整实例形式分析了javascript通过运算与动态操作页面元素实现调色板功能的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2016-12-12
JavaScript插件化开发教程（六）
本文是javascript插件化开发系列教程的第六篇文章，还是重点对上一篇文章不足的地方进行改进重构，逐步分析让大家能有一个新的认识，希望小伙伴们能够喜欢。
2015-02-02

ES6中class类用法实例浅析

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具