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 相关文章推荐
页面中js执行顺序
Nov 09 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
jQuery实现轮播图效果demo
Jan 11 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
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
JavaScript中Function详解
2015/02/27 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
使用jQuery实现动态添加小广告
2017/07/11 jQuery
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
整理Python中的赋值运算符
2015/05/13 Python
快速入手Python字符编码
2016/08/03 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
Python中Threading用法详解
2017/12/27 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
python的sys.path模块路径添加方式
2020/03/09 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
新年爱情寄语
2014/04/08 职场文书
环保标语大全
2014/06/12 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
公司搬迁通知
2015/04/20 职场文书
单位考核鉴定意见
2015/06/05 职场文书