秒懂JS继承

  • Post author:
  • Post category:其他

原型继承

原型继承本质上是将子类的原型变成父类原型的实例。于是子类原型的隐士原型就会指向父类原型对象。

		function Parent() {
            this.score = [1, 2, 3]
        }

        function Child() { }
        Child.prototype = new Parent()
        Parent.prototype.sayName = function () {
            console.log(this.name)
        }
        const c1 = new Child()
        const c2 = new Child()
        c1.score.push('c1')
        c2.score.push('c2')
        console.log(c2.score)
        //[1, 2, 3, 'c1', 'c2']z

缺点:
①通过打印我们可以看出来缺点在于多个子类实例会共享父类原型上的引用类型。
②我们无法给父类构造函数传递参数

构造函数继承

本质上就是将父类构造函数当作普通函数去调用,通过call改变this指向,这种方式可以给父类构造函数传递参数。

        function Parent(name) {
            this.name = name
            this.score = [1, 2, 3]
        }

        function Child(name) {
            Parent.call(this, name)
        }
        const c1 = new Child('c1')

缺点:①函数无法重用②子类无法访问父类原型上定义的方法

寄生组合式继承

将原型继承和盗用构造函数的方式结合,从而能够继承父类原型方法和属性切能够给父类构造函数传递参数。

        function Parent(name) {
            this.name = name
            this.score = [1, 2, 3]
        }

        function Child(name) {
            Parent.call(this, name)
        }
        Child.prototype = new Parent()
        Child.prototype.constructor = Child
        Parent.prototype.sayName = function () {
            console.log(this.name)
        }

        const c1 = new Child('c1')

缺点:
①父类构造函数会调用两次:第一次 Child.prototype = new Parent()
第二次构造child实例的之后会执行 Parent.call(this, name)

最终版的寄生组合式继承

        function Parent(name) {
            this.name = name
            this.score = [1, 2, 3]
        }

        function Child(name) {
            Parent.call(this, name)
        }
        Child.prototype = Object.create(Parent.prototype)
        Child.prototype.constructor = Child
        Parent.prototype.sayName = function () {
            console.log(this.name)
        }
        //上面的代码可以用这个函数去调用
        function inheriPrototype(Parent,Child){
            const prototype = Object.create(Parent.prototype)
            prototype.constructor = Child
            Child.prototype = prototype
        }
        const c1 = new Child('c1')

上面代码通过 Child.prototype = Object.create(Parent.prototype)解决了父类构造函数会执行两次的问题也是最完美的继承方式了。


版权声明:本文为m0_47195133原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。