码迷,mamicode.com
首页 > 其他好文 > 详细

构造函数继承与class继承

时间:2020-06-08 16:14:44      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:parent   log   函数继承   调用   ons   实现继承   call   原型   style   

构造函数继承

1、子类通过apply方法或者call方法把this指向父类

js代码

        function Parent(name, age) {
            this.name = name
            this.age = age
        }
        Parent.prototype.init = function(){
            console.log(this.name, this.age) 
        }
        function Son(name, age) {
            Parent.apply(this, [name, age]) //子类通过apply方法或者call方法把this指向父类
        }

这种方法继承了父类的属性,然而并没有继承父类原型上方法

2、把父类实例对象赋值给子类原型

js代码

        function Parent(name, age) {
            this.name = name
            this.age = age
        }
        Parent.prototype.init = function(){
            console.log(this.name, this.age) 
        }
        function Son(name, age) {
            
        }
        Son.prototype = new Parent() //把父类实例对象赋值给子类原型
        Son.prototype.constructor = Son //严谨起见,不写也不会影响效果

这虽然继承了父类原型方法,但是却没有继承父类属性

把1、2这两者综合一下就是构造函数的组合继承了,这样就实现了继承父类的方法和属性

js代码

        function Parent(name, age) {
            this.name = name
            this.age = age
        }
        Parent.prototype.init = function(){
            console.log(this.name, this.age) 
        }
        function Son(name, age) {
            Parent.call(this,name,age) //子类通过apply方法或者call方法把this指向父类
        }
        Son.prototype = new Parent() //把父类实例对象赋值给子类原型
        Son.prototype.constructor = Son //严谨起见,不写也不会影响效果

组合继承:缺点,实现继承的过程中调用了两次父类实例

class继承

1、通过extends关键字继承父类原型方法,super方法继承父类属性,

js代码

        class Parent{
            constructor(name,age) {
                this.name = name
                this.age = age
            }
            init(){
                console.log(this.name,this.age)
            }
        }
        class Son extends Parent{ //extends关键字继承父类原型方法
            constructor(name,age) {
               super(name,age) //super方法继承父类属性
            }
        }
        new Son(‘张三‘,18).init()

 

构造函数继承与class继承

标签:parent   log   函数继承   调用   ons   实现继承   call   原型   style   

原文地址:https://www.cnblogs.com/zlf1914/p/13066270.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!