ES6 class的应用实例分析


Posted in Javascript onJune 27, 2019

本文实例讲述了ES6 class的应用。分享给大家供大家参考,具体如下:

class

  • class 本身是个语法糖,主要为了考虑在编码上更加人性化
  • 内部有super,static,get 等关键词
  • 使用起来非常类似于后台语言

使用class进行类的实现应用

'use strict';
// User 类
class User {
 constructor(name,age) {
  this.name = name;
  this.age = age;
 }
 static getName() {
  return 'User';
 }
 static getAge() {
  return this.age;
 }
 setName(name) {
  this.name = name;
 }
 setAge(age) {
  this.age = age;
 }
 get info() {
  return 'name:' + this.name + ' | age:' + this.age;
 }
}
// Manager 类
class Manager extends User{
 constructor(name,age,password){
  super(name,age);
  this.password = this.password;
 }
 changePwd(pwd) {
  return this.password = pwd;
 }
 get info() {
  var info = super.info; // 使用super继承父级 get
  return info + ' === new';
 }
}
// typeof User: function typeof Manager: function
console.log('typeof User: ', typeof User, ' typeof Manager: ', typeof Manager); 
let manager = new Manager('Li', 22, '123456');
manager.setAge(23);
console.log(manager.info); // name:Li | age:23 === new
console.log(User.prototype);
console.log(Manager.prototype);

在class之前使用原型对象定义类的应用

// 构造函数
function User(name,age) {
 this.name = name;
 this.age = age;
}
// 原型
User.prototype = {
 getName:function(){
  return 'User';
 },
 setName:function(name){
  this.name = name;
 },
 getAge:function(){
  return this.age;
 },
 setAge:function(age){
  this.age = age;
 }
}
// 取值函数和存执函数
Object.defineProperty(User.prototype,'info', {
 get() {
  return 'name:' + this.name + ' | age:' + this.age;
 }
});
var user = new User('Joh', 26);
console.log(user); // User {name: "Joh", age: 26}
// 子类
function Manager(name, age, password) {
 User.call(this, name, age);
 this.password = password;
}
Manager.__proto__ = User; // 继承静态方法
Manager.prototype = Object.create(User.prototype); // 继承prototype原型方法
Manager.prototype.changePwd = function (pwd) {
 this.password = pwd;
};
var manager = new Manager('Li', 22, '123456');
manager.setAge(23);
console.log(manager.info); // name:Li | age:23
console.log(User.prototype); // 不变
console.log(Manager.prototype); // {changePwd:function(){}, info:"name:undefined | age:undefined", __proto__:指向Manager.prototype}

使用 class 定义的类不被提升,需按顺序执行

正常:

let user = new class User {
 constructor(name) {
  this.name = name;
 }
}('Joh');
console.log(user); // User {name: "Joh"}

错误:

var man = new Man(); // 此处报错,使用class声明的类不会被提升 Uncaught ReferenceError: Man is not defined
class Man {
 constructor(name){
  this.name = name;
 }
}

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
实用的Vue开发技巧
May 30 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
ES6 Promise对象的应用实例分析
Jun 27 #Javascript
使用Vue 实现滑动验证码功能
Jun 27 #Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 #Javascript
javascript触发模拟鼠标点击事件
Jun 26 #Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 #Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 #Javascript
通过javascript实现段落的收缩与展开
Jun 26 #Javascript
You might like
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
php实现评论回复删除功能
2017/05/23 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
JS无限树状列表实现代码
2011/01/11 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
python对象及面向对象技术详解
2016/07/19 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
Python的Lambda函数用法详解
2019/09/03 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
一套带答案的C++笔试题
2014/01/10 面试题
C#如何进行LDAP用户校验
2012/11/21 面试题
软件测试有哪些?什么是配置项?
2012/02/12 面试题
黄河象教学反思
2014/02/10 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
模范教师事迹材料
2014/12/16 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
关于MySQL中explain工具的使用
2023/05/08 MySQL