JavaScript进阶讲解十—＞面向对象四（class类）

一、对象的其他方法 hasOwnProperty：对象是否有某一个属于自己的属性（不是在原型上的属性）。in/for in *** 作符：判断某个属性是否在某个对象或者对象的原型上。instanceof：用于检测构造函数的pototype，是否出现在某个实例对象的原型链上。isPrototypeOf：用于检测某个对象，是否出现在某个实例对象的原型链上

var obj = {
    name: 'xt'
}

var info = Object.create(obj, {
    age: { value: 18, enumerable: true }
    
})

console.log(info); // { age: 18 }
console.log(info.name); // xt

// hasOwnProperty对象是否有某一个属于自己的属性（不是在原型上的属性）
console.log(info.hasOwnProperty('age')); // true
console.log(info.hasOwnProperty('name')); // fasle

// in/for in判断某个属性是否在某个对象或者对象的原型上
console.log('name' in info); // true
console.log('age' in info); // true


// instanceof检测构造函数的pototype，是否出现在某个实例对象的原型链上
function Foo() {
    name: 'xt'
}
var obj1 = new Foo()

console.log(obj1 instanceof Foo); // true
console.log(obj1 instanceof Object); // true
// console.log(obj instanceof info); // 报错

// isPrototypeOf 检测某个对象，是否出现在某个实例对象的原型链上
console.log(obj.isPrototypeOf(info)); // true

二、class定义类 在ES6中使用class关键字来定义类。但是类本质上依然是前面所讲的构造函数、他是原型链的语法糖。 声明类的两种方式

// 类声明
class Person {

}

// 类表达式
var Student = class {

}
var p = new Person()

console.log(p.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__.__proto__); // null
console.log(Person.prototype.constructor); // [class Person]

其实我们看可以看到，这种和我们之前讲的构造函数的方式很相似的

类的构造函数 每个类都可以有一个自己的构造函数（方法），这个方法的名称是固定的constructor。当我们通过new *** 作符， *** 作一个类的时候会调用这个类的构造函数constructor。每个类只能有一个构造函数，如果包含多个构造函数，那么会抛出异常。

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }

    eating() {
        console.log(this.name + 'eating');
    }
}

var p1 = new Person('xt', 18)
var p2 = new Person('tx', 18)

p1.eating()
p2.eating()

类的访问器方法与类的静态方法

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
        this._sex = 'nan'
    }

    eating() {
        console.log(this.name + 'eating');
    }

    // 类的访问器方法
    set age(val) {
        console.log('执行setter');
        this._sex = val
    }

    get age() {
        console.log('执行getter');
        return this._sex
    }

    // 类的静态方法  不需要有类的实例，使用static关键字来定义 Person.create()
    static create() {

    }
}

var p1 = new Person('xt', 18)

p1.eating()

类的继承 - extends

在es6中，我们不必再通过原型链去自己实现继承了，因为他提供了extends关键字。

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }

    eating() {
        console.log(this.name + 'eating');
    }
}


class Student extends Person {
    constructor(name, age, sno) {
        // 在使用this前必须调super
        super(name, age)
        this.sno = sno
    }
}


var p = new Person('tx', 20)
var s = new Student('xt',18, 30)

console.log(p); // Person { name: 'tx', age: 20 }
console.log(s); // Student { name: 'xt', age: 18, sno: 30 }
s.eating() // xteating

重写父类方法

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }

    eating() {
        console.log('1');
        console.log('2');
    }
}


class Student extends Person {
    constructor(name, age, sno) {
        // 在使用this前必须调super
        super(name, age)
        this.sno = sno
    }

    // 重写父类方法
    eating() {
        console.log('4');
    } 
}


var s = new Student('xt',18, 30)

s.eating() // 4

重写父类方法，但继承方法逻辑

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }

    eating() {
        console.log('1');
        console.log('2');
    }
}


class Student extends Person {
    constructor(name, age, sno) {
        // 在使用this前必须调super
        super(name, age)
        this.sno = sno
    }

    // 重写父类方法，但继承方法逻辑
    eating() {
        super.eating()
        console.log('4');
    } 
}


var s = new Student('xt',18, 30)

s.eating() // 1,2,4