• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > ES6中class类用法实例浅析

ES6中class类用法实例浅析

作者:布瑞泽的童话 字体:[增加 减小] 来源:互联网 时间:2017-05-11

布瑞泽的童话通过本文主要向大家介绍了es6中的类,es6 class,es6 export class,js es6 class,nodejs es6 class等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

本文实例讲述了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);
 }
}

</div>

然后通过实例化调用:

var person1 = new Person('lf',23,'software engineer');
person1.sayName();

</div>

下面看看使用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);
 }
}

</div>

可以看到简便了不少。

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));

</div>

但是需要注意的是,ES6中不能直接定义静态成员变量,但是我们可以通过另外的方式来实现:

static get baseUrl() {
  return 'www.baidu.com'
}

</div>

在类语法推出之前,我们想要实现继承,必须通过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.');
 }
}

</div>

但是需要注意的一点就是,继承的原理还是在利用prototype这点没有变,只不过extends裹了一层语法糖而已。

希望本文所述对大家ECMAScript程序设计有所帮助。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • ES6中class类用法实例浅析

相关文章

  • 2017-05-11微信小程序开发经验总结(推荐)
  • 2017-05-11javascript操作cookie
  • 2017-05-11js实现九宫格的随机颜色跳转
  • 2017-05-11vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
  • 2017-05-11微信小程序 http请求封装详解及实例代码
  • 2017-05-11Angular1.x复杂指令实例详解
  • 2017-05-11JS实现的Unicode编码转换操作示例
  • 2017-05-11JS组件系列之JS组件封装过程详解
  • 2017-05-11ES6实现的遍历目录函数示例
  • 2017-05-11NodeJs下的测试框架Mocha的简单介绍

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Angular实现购物车计算示例代码
    • bootstrapValidator.min.js表单验证插件
    • bootstrap select插件封装成Vue2.0组件
    • JavaScript中使用webuploader实现上传视频功能(demo)
    • js对string字符串的处理函数和方法
    • 浅谈键盘上回车按钮的js触发事件
    • JS实现禁止高频率连续点击的方法【基于ES6语法】
    • 使用jQuery和ajax代替iframe的方法(详解)
    • 微信小程序 仿美团分类菜单 swiper分类菜单
    • js仿QQ邮箱收件人选择与搜索功能

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有