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 UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 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连接Oracle数据库
2006/10/09 PHP
mysql时区问题
2008/03/26 PHP
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
jquery select选中的一个小问题
2009/10/11 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
JS前端加密算法示例
2016/12/22 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
学校食堂采购员岗位职责
2013/12/05 职场文书
销售求职信范文
2014/05/26 职场文书
2015年清明节活动总结
2015/02/09 职场文书
浅谈JavaScript作用域
2021/12/06 Javascript