# ES6面向对象 | 彪哥博客
web前端技术博客,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,React,python,css3,html5,Node,git,github等技术文章。
Keywords: 前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown

### 彪哥

爱好前端

- JavaScript文章

  - 33个非常实用的JavaScript一行代码
  - new命令原理
  - ES5面向对象
  - ES6面向对象
  - 多种数组去重性能对比
  - JS随机打乱数组
  - 判断是否为移动端浏览器
  - 将一维数组按指定长度转为二维数组
  - 防抖与节流函数
  - JS获取和修改url参数
  - 比typeof运算符更准确的类型判断

  - 三级目录

- 学习笔记

- 前端
- JavaScript文章

heBody
2019-12-25

# ES6面向对象

# # ES6面向对象

    //面向对象封装
    class Student{ //定义类 (尊从首字母大写的约定)
        constructor(props){  // 构造函数 （构造函数内定于属性）
            this.name = props.name || '匿名'; // 默认'匿名'
          this.grade = props.grade || 1;
        }
        hello(){ // 在构造函数的原型上定义方法
            console.log(`你好,${this.name}同学，你在${this.grade}年级`);
        }
    }

    //使用
    function createStudent(props) { // 对于new构造函数的封装，其优点：一是不需要new来调用，二是参数灵活
        return new Student(props || {}) // 通过new创建构造函数，并传入参数/属性
    }

    let niming = createStudent();
    niming.hello();

    let xiaoming = createStudent({
      name:'小明',
      grade:2
    });
    xiaoming.hello();

    //继承
    class PrimaryStudent extends Student { //class 子类 extends 父类
        constructor(props) {
            super(props); // 用super调用父类的构造方法实现属性继承
            this.age = props.age || 8; //新增子类属性
        }

        getAge() { //对子类添加方法
            console.log(`${this.name}同学，你今年${this.age}岁`);
        }
    }

    //使用继承后的
    function createPrimaryStudent(props) { // 对于new构造函数的封装，其优点：一是不需要再new来调用，二是参数灵活
        return new PrimaryStudent(props || {}) // 通过new创建构造函数，并传入参数/属性
    }

    let xiaohong = createPrimaryStudent({
      name:'小红',
      grade:3,
      age:10
    });
    xiaohong.hello();
    xiaohong.getAge();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
编辑
(opens new window)
上次更新: 2022/12/14, 19:36:42
ES5面向对象
多种数组去重性能对比

← ES5面向对象 多种数组去重性能对比→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式