技术分享
首页
  • JavaScript

    • 构造函数和原型
    • Cookie和Session
    • Object.create(null)和{}
    • TypeScript配置
    • typescript入门到进阶
  • 框架

    • Vue-Router
    • React基础入门
  • 其它

    • Http协议
    • 跨域问题总结
  • 分析Promise实现
  • Axios源码分析
  • Webpack原理
  • vueRouter源码分析
  • Vue

    • Vite快速搭建Vue3+TypeScript项目
    • Cordova打包Vue项目的问题
    • Vue将汉字转为拼音,取出首字母
    • h5项目问题总结
  • JavaScript

    • new Function
  • 后端

    • Node.js中使用Crypto生成Token
    • Body-Parser处理多层对象的问题
  • 其它

    • 项目Demo汇总
    • Vuepress+Vercel搭建个人站点
    • 项目中能用到的
    • husky规范代码提交
  • Mongoose基础
  • Multer文件上传中间件的使用
  • JavaScript

    • 浅谈两数全等
    • JavaScript进制转换
    • 手写bind,apply,call和new
  • 算法

    • 数组去重和排序
    • 数组扁平化
    • 斐波那契数列
  • JavaScript 数据结构
  • 其它

    • webpack面试题
    • vite面试题
    • svg和canvas的优缺点
    • TypeScript面试题
    • Vue常见面试题
  • 计算机网络

    • 数据链路层
    • 网络层
  • Git的使用
  • Nginx的使用
  • CentOS7安装Nginx
  • 正则表达式
  • SEO搜索引擎优化
  • Serverless介绍
友链
GitHub (opens new window)

刘誉

总有人要赢,为什么不能是我
首页
  • JavaScript

    • 构造函数和原型
    • Cookie和Session
    • Object.create(null)和{}
    • TypeScript配置
    • typescript入门到进阶
  • 框架

    • Vue-Router
    • React基础入门
  • 其它

    • Http协议
    • 跨域问题总结
  • 分析Promise实现
  • Axios源码分析
  • Webpack原理
  • vueRouter源码分析
  • Vue

    • Vite快速搭建Vue3+TypeScript项目
    • Cordova打包Vue项目的问题
    • Vue将汉字转为拼音,取出首字母
    • h5项目问题总结
  • JavaScript

    • new Function
  • 后端

    • Node.js中使用Crypto生成Token
    • Body-Parser处理多层对象的问题
  • 其它

    • 项目Demo汇总
    • Vuepress+Vercel搭建个人站点
    • 项目中能用到的
    • husky规范代码提交
  • Mongoose基础
  • Multer文件上传中间件的使用
  • JavaScript

    • 浅谈两数全等
    • JavaScript进制转换
    • 手写bind,apply,call和new
  • 算法

    • 数组去重和排序
    • 数组扁平化
    • 斐波那契数列
  • JavaScript 数据结构
  • 其它

    • webpack面试题
    • vite面试题
    • svg和canvas的优缺点
    • TypeScript面试题
    • Vue常见面试题
  • 计算机网络

    • 数据链路层
    • 网络层
  • Git的使用
  • Nginx的使用
  • CentOS7安装Nginx
  • 正则表达式
  • SEO搜索引擎优化
  • Serverless介绍
友链
GitHub (opens new window)
  • js基础
  • vue入门
  • react基础入门
  • http协议
  • cookie和session
  • 跨域问题总结
  • 构造函数和原型
  • Object.create(null)和{}
  • TypeScript配置
  • Vue-Router
  • typescript入门到进阶
  • 前端
coderly
2019-03-21

js基础

# 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
55
56
#JavaScript
上次更新: 2021/03/25, 12:42:28
vue入门

vue入门→

最近更新
01
代码片段
04-22
02
koa全家桶
03-29
03
mocks项目复盘
03-29
更多文章>
Theme by Vdoing | Copyright © 2021-2022 coderly | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式