ES6-class类

通过class关键字,可以定义类。该方法定义的原型对象跟ES5定义的没有多少区别,只是用class的写法能让对象原型的定义更加清晰,更像面向对象编程的语法。

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
        this.fun = ()=>console.log('constructor内的方法可以被遍历到哦')
    }
    say() {
        console.log(`My name is ${this.name}`)
    }
}
let p1 = new Person('Liane',18)
p1.say()  //My name is Liane
//使用class创建的构造函数,所有的方法都会被定义在prototype属性上面,因此是不能够被遍历到的。
console.log(p1) //{name: 'Liane', age: 18,fun: f}
for(let k in p1){
    console.log(k) //name  //age  //fun
}
//所以,添加类的方法可以使用Object.assign()方法,一次性向类添加多个方法
Object.assign(Person.prototype, {
    growUp(){
        return ++this.age
    },
    eat(food){
        console.log(`${this.name}吃了${food}`)
    }
})
p1.growUp()
console.log(p1.age)   //19
p1.eat('apple')
//也可使用Object.getPrototypeOf(obj)方法获取obj的原型对象,再为原型添加方法或属性
Object.getPrototypeOf(p1) === Person.prototype   //true

this的指向:
类的方法内部如果有this,它默认是指向类的实例,但如果将该方法提出来单独使用,this会指向该方法运行时的环境。因此我们可以使用bind绑定this,或者使用箭头函数来解决。

class Logger{
    printName(name){
        this.print(`Hello ${name}`)
    }
    print(text){
        console.log(text)
    }
}

const logger = new Logger();
const {printName} = logger;
printName('Liane')  //报错

使用bind绑定this

class Logger{
    constructor(){
        this.printName = this.printName.bind(this)
    }
    printName(name){
        this.print(`Hello ${name}`)
    }
    print(text) {
        console.log(text)
    }
}

const logger = new Logger();
const {printName} = logger;
printName('Liane')  //'Hello Liane'

使用箭头函数

class Logger{
    constructor(){
        this.printName =(name)=>this.print(`Hello ${name}`);
    }
    print(text) {
        console.log(text)
    }
}

const logger = new Logger();
const {printName} = logger;
printName('Liane')  //'Hello Liane'

你可能感兴趣的:(ES6-class类)