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 相关文章推荐
Javascript 跨域访问解决方案
Feb 14 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
基于javascript实现移动端轮播图效果
Dec 21 Javascript
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
关于PHP中Object对象的笔记分享
2011/06/28 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
用PHP代码给图片加水印
2015/07/01 PHP
浏览器缩放检测的js代码
2014/09/28 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
python正则表达式面试题解答
2020/04/28 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
使用pandas读取文件的实现
2019/07/31 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
打架检讨书100字
2014/01/08 职场文书
七年级政治教学反思
2014/02/03 职场文书
北体毕业生求职信
2014/02/28 职场文书
讲座主持词
2014/03/20 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
教师节慰问信
2015/02/15 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js