ES6中class类用法实例浅析


Posted in Javascript onApril 06, 2017

本文实例讲述了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 相关文章推荐
基于jquery的一个浮动框(扩展性比较好 )
Aug 27 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 #Javascript
ES6中Symbol类型用法实例详解
Apr 06 #Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 #Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 #Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 #Javascript
ES6中的箭头函数实例详解
Apr 06 #Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 #Javascript
You might like
PHP分页显示制作详细讲解
2006/10/09 PHP
discuz Passport 通行证 整合笔记
2008/06/30 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
简单的三步vuex入门
2018/05/20 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
web.py中调用文件夹内模板的方法
2014/08/26 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
携程英文网站:Trip.com
2017/02/07 全球购物
银行自荐信范文
2013/10/07 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
餐饮营销方案
2014/02/23 职场文书
房屋委托书范本
2014/04/04 职场文书
竞聘自述材料
2014/08/25 职场文书
高中社区服务活动报告
2015/02/05 职场文书
护士旷工检讨书
2015/08/15 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android