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学习笔记之jQuery选择器的使用
Dec 22 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
详解JS函数重载
Dec 04 Javascript
javascript中的this详解
Dec 08 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
AngularJS表单验证功能分析
May 26 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
JavaScript实现省份城市的三级联动
Feb 11 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
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中的作用域规则详解
2015/01/30 Python
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
《晏子使楚》教学反思
2014/02/08 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
党支部书记岗位职责
2015/02/15 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
九九重阳节致辞
2015/07/31 职场文书
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server