首页 > 开发 > JS > 正文

ES6 class的应用实例分析

2024-05-06 16:52:50
字体:
来源:转载
供稿:网友

本文实例讲述了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/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表