ES5 and ES6 类之间区别

前言

国庆时间准备刷TypeScript 和 Vue 进阶 知识， 刷TS时，视频中间有关ES6 和 ES5 部分内容，就作总结学习一下，之前到是也学过，好久不用了，就忘了。正好补充下。

---

在ES6 and ES5 中 函数的创建方式

在ES5中

//  第一种
var getDates = function() {

}
// 第二种
function getDatess() {

}

在ES6 中

//  第一种
class Fruits{
    constructor(){
        // 可写可不写， 默认会有
    }
}
// 第二种
const Fruitd = new class {
    
}

ES6 中 set get 使用

// set 是对属性的赋值
// get 是对属性的取值
class Student {
    constructor(name) {
        this._name = name
    }
    set name(newValue) {
        this._name = newValue
        console.log(this.name)
    }
    get name() {
        return this._name
    }
    getInfos() {
        console.log(`${name} 的 身份是学生`)
    }
}

const xiaoLi = new Student("小李")
console.log(xiaoLi.name)
xiaoLi.getInfos()

ES6中静态方法，暂 静态属性 ES6中没更新，不能直接 static 属性

//  在ES6中有静态方法，但是目前还没有静态属性，  可以通过类名.方法访问 静态方法
class Actor {
    constructor (name) {
        this.name = name
    }
    static getActorInfo () {
        return `${this.name}是一位男演员`
    }
}

const liBai = new Actor("李白")
console.log(liBai.name)
// console.log(liBai.getActorInfo())     报错， 只能通过类名.方法
console.log(Actor.getActorInfo())


// 如果想使用定义静态属性的话，可以在类的原型上添加
Actor.sex = '男'
// console.log(liBai.sex)   类的实例对象是不能访问静态属性的， 可以通过类.属性 来访问
console.log(Actor.sex)

---

ES6 和 ES5 中的继承实现

ES5中继承实现的其中一种方法

// 1  通过创建一个父类的实例化对象并且赋值给 子类对象原型
function Actions () {
    this.actions = "奔跑"
}
Actions.prototype.getActions = (name) => {
    console.log(`${name}的特性是会奔跑`)
}

function Animalss (name) {
    this.name = name
}

Animalss.prototype = new Actions() // 通过创建一个父类的实例化对象并且赋值给 子类对象原型
const erha = new Animalss("二哈")
// 以下 子类就可以使用父类的方法和属性了
erha.getActions(erha.name)
console.log(erha.actions)

在ES6中实现继承 extends

//  子类继承父类后， 父类的静态方法可以 通过子类 访问

class Father {
    constructor(name) {
        this.name = name
    }
    getName () {
        console.log(this.name)
    }
    static getClassName () {
        return this.name
    }
}

class Son extends Father {
    constructor(girlFriend){
        super()
        this.girlFriend = girlFriend
    }
    getHave(){
        console.log(`${this.name}的女朋友是${this.girlFriend}`)
    }
}
const son = new Son("小红")
son.name = "小明"
son.getHave()
console.log(Son.getClassName())

super 的作用

// 1. 作为 构造函数 -------》 子类继承了父类，必须实现 super()，然后才可以通过this.属性 进行赋值操作
// 2. 作为 对象 --------》  可以直接 通过super.父类的方法和属性  进行访问

class F {
    constructor (name) {
        this.name = name
    }
    static getNames () {
        return this.name
    }
    getHobby (hobby) {
        console.log(`${this.name}的爱好是${hobby}`)
    }
}
class S extends F {
    constructor (typed) {
        super(name)
        this.typed = typed
    }
    getInfod () {
        super.getNames()
    }
    getF_Hobby (hobby) {
        super.getHobby(hobby)
    }
}

const sons = new S("son")
console.log(S.getNames())
sons.name = "老王"
sons.getF_Hobby('敲代码')

prototype 与 proto

// 1. 子类的__proto__ 指向父类本身
// 2.  子类的prototype 属性的__proto__  指向父类的prototype属性
// 3。 实例__proto__ 属性的__proto__ 指向父类实例的__proto__

ES5的继承和ES6的继承有什么区别

ES5的继承是通过prototype或构造函数机制来实现。

ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上(Parent.apply(this))。

ES6的继承机制实质上是先创建父类的实例对象this(所以必须先调用父类的super()方法)，然后再用子类的构造函数修改this。具体为ES6通过class关键字定义类，里面有构造方法，类之间通过extends关键字实现继承。子类必须在constructor方法中调用super方法，否则新建实例报错。因为子类没有自己的this对象，而是继承了父类的this对象，然后对其调用。如果不调用super方法，子类得不到this对象。

注意：super关键字指代父类的实例，即父类的this对象。在子类构造函数中，调用super后，才可使用this关键字，否则报错。