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 相关文章推荐
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
js实现的折叠导航示例
Nov 29 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
详解Bootstrap 学习(一)入门
Apr 12 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
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
jQuery版仿Path菜单效果
2011/12/15 Javascript
js跳转页面方法总结
2014/01/29 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
django用户登录和注销的实现方法
2018/07/16 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
pandas数据处理进阶详解
2019/10/11 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
python实现人机猜拳小游戏
2020/02/03 Python
python处理写入数据代码讲解
2020/10/22 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
HTML5地理定位实例
2014/10/15 HTML / CSS
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
四年级学生评语大全
2014/04/21 职场文书
团队拓展活动总结
2014/08/27 职场文书
高二化学教学反思
2016/02/22 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
Python利用FlashText算法实现替换字符串
2022/03/31 Python