ES6类（class）和继承

程序中类

ES6

面向对象 ，类
    属性
    方法
函数模拟

人:  Person
    属性: name
    展示名字: showName

     Person.prototype.showName
ES5之前：
    function Person(){
        this.name='aaa';
    }
    Person.prototype.showName=function(){}

ES6中变形:
    class Person{
        constructor(){
            this.name = 'aaa';
        } 
        showName(){

        }
    }
    --------------------------
    const Person = class{}
    ------------------------------
    let a = 'strive';
    let b = 'method';

    class Person{
        [a+b](){
            
        }
    }


let aaa='aaa';
let bbb='ddd';
let json={
    [aaa+bbb]:'welcome 51mmr.net'
}

注意： 
1. ES6里面class没有提升功能，在ES5，用函数模拟可以，默认函数提升
2. ES6里面this 比之前轻松多了


矫正this:
    1. fn.call(this指向谁, args1, args2....)
    2. fn.apply(this指向谁, [args1, args2....])
    3. fn.bind()
------------------------------------------------------------
class里面取值函数(getter), 存值函数(setter)
------------------------------------------------------------
静态方法: 就是类身上方法
    static aaa(){

    }

    父类.aaa();
------------------------------------------------------------

父类
子类
------------------------------------------------------------
继承:
    之前:

Person
Student
    
    现在: extends
    class Student extends Person{
            
             }
------------------------------------------------------------
拖拽  

 // function Person(name, age) {
    //     this.name = name;
    //     this.age = age;
    // }
    // ES5
    // Person.prototype.showName = function () {
    //     return `名字为：${this.name}`
    // }

    // Person.prototype.showAge = function () {
    //     return `年龄为：${this.age}`
    // }

    // ES6方法 assign()

    // Object.assign(Person.prototype, {
    //     showName() {
    //         return `名字为：${this.name}`
    //     },
    //     showAge() {
    //         return `名字为：${this.age}`
    //     }
    // })

    // let aaa = 'liu'
    // class Person {
    //     constructor(name, age) {//构造函数，调用new，自动执行
    //         // console.log(`构造函数执行了, ${name},, ${age}`)
    //         this.name = name;
    //         this.age = age;
    //     }
    //     showName() {
    //         return `名字为：${this.name}`
    //     }
    //     showAge() {
    //         return `年龄为：${this.age}`
    //     }
    //     [aaa]() {
    //         return 'hello'
    //     }
    // }
    // let p1 = new Person('liu', 12)
    // console.log(p1.name, p1.age)
    // // console.log(p1.showName(), p1.showAge())
    // console.log(p1.liu())//hello
    // console.log(p1[aaa]())//hello

    // let p1 = new Person('liu')//不能再这里实例化
    // console.log(showName())//会报错

    // class Person {
    //     constructor(name) {
    //         this.name = name;
    //         this.showName = this.showName.bind(this)//矫正this指向
    //     }
    //     showName() {
    //         return `名字为：${this.name}`
    //     }
    // }
    // // ES6里面class没有提升功能，在ES5，用函数模拟可以，默认函数提升
    // let p1 = new Person('liu')//只能先定义在实例化
    // let { showName } = p1
    // console.log(showName())



    // class Person {
    //     constructor() {
    //     }
    //     set aaa(val) {
    //         console.log(`设置aaa属性，值：${val}`)
    //     }
    //     get aaa() {
    //         return `aaa属性的值`
    //     }
    // }
    // // ES6里面class没有提升功能，在ES5，用函数模拟可以，默认函数提升
    // let p1 = new Person()//只能先定义在实例化
    // p1.aaa = '123'
    // console.log(p1.aaa)


    // class Person {
    //     constructor() {
    //     }
    //     showName() {
    //         return `这是showName方法`
    //     }
    //     static aaa() {
    //         return '这是静态方法'
    //     }
    // }
    // let p1 = new Person()
    // console.log(p1.showName())
    // console.log(Person.aaa())


    // class Person {
    //     constructor(name) {
    //         this.name = name
    //     }
    //     showName() {
    //         return `这是showName方法:${this.name}`
    //     }
    // }
    // class Student extends Person {
    //     // constructor(args) {
    //     //     super(args)
    //     // }
    // }
    // let p1 = new Student('liu', '逃学')
    // console.log(p1.showName())

    // class Person {
    //     constructor(name) {
    //         this.name = name
    //     }
    //     showName() {
    //         return `这是showName方法:${this.name}`
    //     }
    // }
    // class Student extends Person {
    //     constructor(name, skill) {
    //         super(name);
    //         this.skill = skill;
    //     }
    //     showSkill() {
    //         return `哥们儿的技能为：${this.skill}`
    //     }
    // }
    // let p1 = new Student('liu', '逃学')
    // console.log(p1.showSkill())

image.png image.png