JS实现继承的六种方式

心已赠人 2022-12-25 11:53 90阅读 0赞

// 第一种方式：对象冒充（不推荐）
    // 注意：此种继承方式对象实例化后在编译器中继承对象（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()