JS实现继承的六种方式

// 第一种方式：对象冒充（不推荐）
// 注意：此种继承方式对象实例化后在编译器中继承对象（children）不会代码提示父类的方法（parent）
// function Parent(username) {
//     this.username = username
//     this.getUsername = function () {
//         console.log(this.username)
//     }
// }
// function Children(username, password) {
//     this.ext = Parent
//     this.ext(username)
//     delete this.ext
//     this.password = password
//     this.getPassword = function () {
//         console.log(this.password)
//     }
// }
// const parent = new Parent('father')
// const child = new Children('child', 'password')
// parent.getUsername()    // father
// child.getUsername()     // child
// child.getPassword()     // password


// 第二种方式：通过call方式继承（不推荐）
// 注意：此种继承方式对象实例化后在编译器中继承对象（children）不会代码提示父类的方法（parent）
// function test(str) {
//     console.log(this.name + "\t" + str)
// }
// const obj = Object.create(null)
// obj.name = 'zhangsan'
// test.call(obj, 'lihai')

// function Parent(username) {
//     this.username = username
//     this.hello = function () {
//         console.log(this.username)
//     }
// }
//
// function Child(username, password) {
//     Parent.call(this, username)
//     this.password = password
//     this.world = function () {
//         console.log(this.password)
//     }
// }
//
// const parent = new Parent('zhangsan')
// const child = new Child('lisi', 'nihao')
// parent.hello()
// child.hello()
// child.world()

// 第三种方式： 通过apply方式继承（不推荐）
// 注意：此种继承方式对象实例化后在编译器中继承对象（children）不会代码提示父类的方法（parent）
// function Parent(username) {
//     this.username = username
//     this.hello = function () {
//         console.log(this.username)
//     }
// }
//
// function Child(username, password) {
//     // Parent.apply(this, new Array(username))  // 与下面结果一致
//     Parent.apply(this, [username])
//     // Parent.apply(this, Array.prototype.slice.call(username)) // 与下面结果一致
//     // Parent.apply(this, [...username])
//     this.password = password
//     this.world = function () {
//         console.log(this.password)
//     }
// }
//
// const par = new Parent('zhangsan')
// const child = new Child('lisi', 'hah')
// par.hello()
// child.hello()
// child.world()

// 第四种方式： 通过原型链继承（推荐）
// 注意：此种方式可以通过编译器显示继承方法
// function Parent() {
// }
// Parent.prototype.hello = 'hello'
// Parent.prototype.sayHello = function () {
//     console.log(this.hello)
// }
//
// function Child() {
// }
// Child.prototype = new Parent()
// Child.prototype.world = 'world'
// Child.prototype.sayWorld = function () {
//     console.log(this.world)
// }
//
// const parent = new Parent()
// const child = new Child()
// parent.sayHello()
// child.sayHello()
// child.sayWorld()

// 第五种：混合方式（强烈推荐）
// function Parent() {
// }
// Parent.prototype.hello = 'hello'
// Parent.prototype.sayHello = function () {
//     console.log(this.hello)
// }
//
// function Child(hello, world) {
//     Parent.call(this, hello)
//     this.world = world
// }
// Child.prototype = new Parent()
// Child.prototype.sayWorld = function () {
//     console.log(this.world)
// }
//
// const parent = new Parent()
// const child = new Child('hello', 'world')
// parent.sayHello()
// child.sayHello()
// child.sayWorld()

// 第六种：ES6继承
class Parent {
    constructor(hello) {
        this.hello = hello
    }
    sayHello() {
        console.log(this.hello)
    }
}
class Child extends Parent{
    constructor(hello, world) {
        super();
        this.hello = hello
        this.world = world
    }
    sayWorld() {
        console.log(this.world)
    }
}

const parent = new Parent('hello')
const child = new Child('hello', 'world')
parent.sayHello()
child.sayHello()
child.sayWorld()