(精华)2020年7月4日 JavaScript高级篇 ES6(class类)

是什么

• es6新提供的一种生成对象实例的写法 es5构造函数的另外一种写法（语法糖）

作用

• 无疑让写法更清晰 更像面向对象的写法

回顾之前es5生成实例对象

Person.prototype.say = function(){
    console.log('我会说话');
}
// 这是错误的写法
// Person.prototype.say = ()=>{
//     console.log(`我是${this.name}`);
// }
function Person(name,age){
    this.name = name
    this.age  = age
}

let person1 = new Person('张三',18)
person1.say()

class类生成实例对象

class Person{
    constructor(name,age){
        this.name = name
        this.age = age
    }
    say(){
        console.log(`我是${this.name}`); 
    }
}
let person2 = new Person('李四',20)
person2.say()
console.log(typeof Person); // function
console.log(person2.constructor === Person);

constructor 方法

// es6类的方法都定义在类的prototype属性上面
// 其实调用es6类的方法就是调用原型上的方法
class Car{
    constructor(){
        console.log(this);
        // 指向其他的对象  null 
        return Object.create(null)
    }
}

let bmw = new Car()
console.log(bmw instanceof Car)

共享一个原型对象

class Person{
    constructor(name) {
        this.name = name
    }
    
}
Person.prototype.get = function(){
    console.log('我是父类')
}

let person1 = new Person('张三')
let person2 = new Person('李四')

person1.get()
person2.get()

取值函数和存值函数

const person = {
    get name(){
        console.log(name);
        return name
    },
    set name(value){
        console.log(value);
        name = value
    }
}

person.name = 'tony'
// console.log();
console.log(person.name);
class MyClass{
    get prop(){
        return MyClass.prop
    }
    set prop(value){
        MyClass.prop = value
    }
}

let init = new MyClass()
init.prop = 123
console.log(init.prop);
    

this指向问题

// 第一种 箭头函数
eat = ()=>{
    this.get()
}
// 第二种 绑定this
constructor(){
    this.eat = this.eat.bind(this)
}

实例属性的新写法

class Person{
    name = 'tony'
}

静态属性

// 静态属性 指的是class本身的属性 Class.propname 并不是实例的属性
class Person{
    static age = 18 // 现在静态属性的写法
    name = 'tony'

}
let person1 = new Person()  
console.log(person1.age);// undefined

静态方法

// 静态方法
class Person{
    static age = 18 // 现在静态属性的写法
    static say(){
        console.log('hello');
    }
    name = 'tony'
}
// let person1 = new Person()  
Person.say()

私有属性

以前用闭包实现私有属性

class Math{
    #count = 0
    add(){
        this.#count ++;
        return this.#count
    }
}
let math = new Math()
// console.log(math.#count); 会报错
console.log(math.add());

私有方法

class MathAdd{
    #a;
    #b;
    constructor(){
        this.#a = 1;
        this.#b = 2;
    }
    #sum = ()=>{
        return this.#a + this.#b
    }
    conSum(){
        console.log(this.#sum());
        
    }
}

let mathadd = new MathAdd()
// console.log(math.#count); 会报错
mathadd.conSum()