ES6 class的应用实例分析

前端  /  管理员 发布于 5年前   427

本文实例讲述了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: functionconsole.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 === newconsole.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:23console.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 definedclass Man { constructor(name){  this.name = name; }}

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

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

您可能感兴趣的文章:

• JavaScript ES6中CLASS的使用详解
• 深入浅析ES6 Class 中的 super 关键字
• JavaScript ES6的新特性使用新方法定义Class
• ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
• ES6 javascript中class类的get与set用法实例分析
• ES6 javascript中class静态方法、属性与实例属性用法示例
• ES6中class类用法实例浅析
• ES6中Class类的静态方法实例小结
• ES6入门教程之Class和Module详解
• 解读ES6中class关键字
• es6新特性之 class 基本用法解析