文章内容输出来源：拉勾教育大前端高薪训练营
文章说明：文章内容为学习笔记，学徒之心，仅为分享; 如若有误，请在评论区指出，如若您觉得文章内容对您有一点点帮助，请点赞、关注、评论，共享
上一篇：第一阶段.模块二：学习笔记-TypeSrcipt的泛型
下一篇：第一阶段.模块二：学习笔记-es6的类进阶
es6 的类
es6 中创建类的时候，类名的首字母要大写 例如：class Animal{}
es6 中创建类的时候，类里面必有 constructor（）{} 函数
es6 中创建类的时候，constructor 函数中的 this 指向的是 通过类 创建的实例
1-es5 和 es6 中实现创建类的实例
class Animal {
constructor(name, age) {
this.name = name
this.age = age
}
// 在Animal的原型对象上创建方法 sport
sport() {
return `${this.name}的年龄是${this.age},它正在奔跑`
}
}
const dog = new Animal('大龙', 2)
console.log(dog.sport())
2-constructor 方法
// constructor函数里面可以有返回值，但是大多数都不用写的
// constructor函数里面自己写了return的话
// 那么类创建的实例，就不在是该类本身的实例了
class Animal {
constructor(name, age) {
this.name = name
this.age = age
return {a : 'a'}
}
}
const dog = new Animal('大龙', 2)
console.log(dog instanceof Animal) // 返回 false
3-类的实例
// 类的实例自身中有constructor函数内的属相
// 类的实例自身中没有类里面的方法
// 类里面的方法是在类的实例中的原型链上存在着
class Animal {
constructor(name, age) {
this.name = name
this.age = age
}
// 在Animal的原型对象上创建方法 sport
sport() {
return `${this.name}的年龄是${this.age},它正在奔跑`
}
}
const dog = new Animal('大龙', 2) // dog就是类Animal的实例对象
console.log(dog.sport())
console.log(dog.hasOwnProperty('name')) // true
console.log(dog.hasOwnProperty('sport')) // false
console.log(dog.__proto__.hasOwnProperty('sport')) // true
4-类中的取值器 get 函数和存值器 set 函数
// es5的写法：
var ageObj = {
_age: 18,
// setAge虽然是函数，但是对于ageObj对象来说，是自身的setAge属性
set setAge(args) {
args > 18 ? console.log('年龄大于18') : console.log('年龄小于18')
},
// getAge虽然是函数，但是对于ageObj对象来说，是自身的getAge属性
get getAge() {
return this._age
}
}
console.log(ageObj.getAge) // 18
console.log(ageObj.setAge = 20) // 年龄大于18
// es6中类的写法：
class Objs {
constructor(args) {
this.args = args
}
set setAttr(attr) {
this.args = attr
console.log(attr)
}
get getAttr() {
console.log(this.args)
}
}
const objs = new Objs('hello world')
objs.getAttr // hello world
objs.setAttr = 'es6的set存值器和get取值器' // es6的set存值器和get取值器
objs.getAttr //es6的set存值器和get取值器
5-class 的表达式定义方式
// 方式一:
class Animal {
constructor(args){
this.args = args
}
...
}
// 方式二:
const Animal = class {
constructor(args){
this.args = args
}
...
}
6-类中的静态方法
// 使用static 关键字来标明 类中的方法是静态方法
// 静态方法只有类自身可以调用
// 类自身带有name属性
class Animal {
constructor(name, age) {
this.name = name
this.age = age
}
sport() {
console.log(`狗的名字是 ${this.name}, 现在已经 ${this.age}岁了`)
}
static getClassName() {
// 类自身带有name属性
return `该类的名字是 ${Animal.name}`
}
}
const dog = new Animal('花花', 3)
console.log(dog.sport()) // 狗的名字是 花花, 现在已经 3岁了
// console.log(dog.getClassName()) // Uncaught TypeError: dog.getClassName is not a function
console.log(Animal.getClassName()) // 该类的名字是 Animal
7-类中的实例属性其他写法
class Animal {
// 其他写法, 但是可能汇报错，不建议这么写，还是写在constructor函数内最规范
color = '白色'
constructor(name, age) {
this.name = name
this.age = age
}
sport() {
console.log(`狗的名字是 ${this.name}, 现在已经 ${this.age}岁了`)
}
}
const dog = new Animal('花花', 3)
8-类中的静态属性
// es6的类中没有静态属性，但是可以自己手动创建
class Animal {
constructor(name, age) {
this.name = name
this.age = age
}
}
Animal.color = '白色' // 自己手动创建类的静态属性
const dog = new Animal('花花', 3)
console.log(dog.name) // 花花
console.log(dog.color) // undefined
console.log(Animal.color) // 白色
9-实现私有方法
// es6的类中不支持私有方法，是不支持的，但是可以一些技巧手动创建
// 针对模块来说的：将私有方法移出模块
const _func2 = () => {
console.log('我是_func2函数的输出')
}
class Animal {
constructor(name, age) {
this.name = name
this.age = age
}
func1() {
_func2.call(this) // 这样才能调用_func2函数
}
}
const dog = new Animal('花花', 2)
// dog._func2() // Uncaught TypeError: dog._func2 is not a function
dog.func1() // Uncaught TypeError: dog._func2 is not a function
// 针对模块来说的：使用symbol数据类型来创建
// a.js文件内
const func1 = symbol('func1')
export default class Animal{
static [func1] (){
}
}
// b.js文件内
import Animal from './a.js'
const dog = new Animal()
console.log(dog)
10-实现私有属性
// 目前只是发布了一个提案，没有正式发布
// 在类的属性的前面 加上 # 号，表示私有属性
class Animal{
#attr = '私有属性'
}
10-es6 中的 new.terget 属性
// 一般用于构造函数中，返回new命令作用域的构造函数
结语：
来拉钩教育训练营学习已经有三周了，在没有来之前，我都是回家之后打游戏（游戏名：斗战神），来到这里之后才发现居然还有很多大佬也在学习，真的很惊讶，本人自身水平垃圾的一批，再不学习，以后可能一直就是混吃等死的状态了
- 首先来说，拉钩的课程很干，每个视频很短，都是干货，讲师没有一句废话，视频内容覆盖比较广，布置的作业也比较符合实际，导师也会及时批改，然后一周或两周必有直播，直播都会回答学习过程中所遇到的问题和新的内容
- 其次来说，每个班都有班级群，群里居然还有5年或6年的前端开发的大佬(⊙▽⊙)； 班主任和导师也在群里，有任何问题都可以在群里@导师，班级群真的很活跃
- 最后来说一句，如果有其他人也是在打游戏混日子，不如来拉钩教育训练营，尝试着改变一下自己目前所处的环境