最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

ES6 class的应用实例分析

来源:动视网 责编:小采 时间:2020-11-27 21:54:21
文档

ES6 class的应用实例分析

ES6 class的应用实例分析:本文实例讲述了ES6 class的应用。分享给大家供大家参考,具体如下: class class 本身是个语法糖,主要为了考虑在编码上更加人性化 内部有super,static,get 等关键词 使用起来非常类似于后台语言 使用class进行类的实现应用 'use strict';
推荐度:
导读ES6 class的应用实例分析:本文实例讲述了ES6 class的应用。分享给大家供大家参考,具体如下: class class 本身是个语法糖,主要为了考虑在编码上更加人性化 内部有super,static,get 等关键词 使用起来非常类似于后台语言 使用class进行类的实现应用 'use strict';


本文实例讲述了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程序设计有所帮助。

    文档

    ES6 class的应用实例分析

    ES6 class的应用实例分析:本文实例讲述了ES6 class的应用。分享给大家供大家参考,具体如下: class class 本身是个语法糖,主要为了考虑在编码上更加人性化 内部有super,static,get 等关键词 使用起来非常类似于后台语言 使用class进行类的实现应用 'use strict';
    推荐度:
    标签: 使用 实例 分析
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top