js继承的几种方式(原型链继承、构造函数继承、组合式继承、寄生组合式继承、ES6的Class类继承)

1.原型链继承

实现原理:子类的原型指向父类实例。子类在自身实例上找不到属性和方法时去它父类实例(父类实例和实例的原型对象)上查找,从而实现对父类属性和方法的继承

缺点:

  • 子类创建时不能传参(即没有实现super()的功能);
  • 父类实例的修改会影响子类所有实例
javascript 复制代码
        function Parent(name){
            this.name = "父级的name";
        }

        Parent.prototype.getName = function(){
            console.log("getName:"+this.name);
        }
    
        function Child(){

        }

        // 子类原型指向父类的实例
        Child.prototype = new Parent();
        Child.prototype.constructor = Child;//这句话和原型链继承没有关系,只是根据原型链规则绑定constructor

        // 测试
        var child = new Child();
        console.log(child.name);//父级的name
        child.getName();//getName:父级的name
        // 缺点:不能传参;父类实例改变子类所有实例也改变

2.构造函数继承

实现原理:子类构造函数中执行父类的构造函数,并且为父类构造函数绑定子类的this,父类的构造函数把成员属性和方法都挂到子类的this上去,这样既能避免实例之间共享一个原型实例,又能向父类构造方法传参

缺点:无法继承父类原型上的属性和方法

javascript 复制代码
        // 构造函数继承
        function Parent(name) {
            this.name = name;
            console.log("父类构造函数");
        }

        Parent.prototype.getName = function () {
            console.log("getName:" + this.name);
        }

        function Child(name){
            Parent.call(this, name);
        }

        var child = new Child("张三");
        console.log(child);//Child {name: '张三'}
        // 不能继承父类原型上的方法和属性
        child.getName();//报错,child.getName is not a function

3.组合式继承

实现原理:原型链继承+构造函数继承

缺点:父类构造函数会执行两次(Parent.call()和new Parent()),这不影响子类对父类的继承,但是每次创建子类实例时原型中都会有两份相同的属性和方法

javascript 复制代码
        // 组合式继承:原型链继承+构造函数继承
        function Parent(name) {
            this.name = name;
            console.log("父类构造函数");
        }

        Parent.prototype.getName = function () {
            console.log("getName:" + name);
        }

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

        var child = new Child("张三");
        console.log(child);//Child {name: '张三'}
        child.getName();

4.寄生式组合继承

实现原理:父类构造函数会执行两次(Parent.call()和new Parent()),那么在原型链继承时就只继承父类的原型,就不会执行两次父类构造函数 Child.prototype = Parent.prototype;

缺点:**操作子类原型对象,会影响到父类原型对象,**例如给Child.prototype增加一个getName()方法,那么会导致Parent.prototype也增加或被覆盖一个getName()方法

javascript 复制代码
        // 寄生式组合继承:原型链继承(只继承父类原型)+构造函数继承
        function Parent(name) {
            this.name = name;
        }

        Parent.prototype.getName = function () {
            console.log("getName:" + this.name);
        }

        function Child(name) {
            Parent.call(this, name);
        }
        Child.prototype = Parent.prototype;
        Child.prototype.constructor = Child;

        var child = new Child("张三");
        console.log(child);//Child {name: '张三'}
        child.getName();

4.1解决寄生式组合继承的缺点(使用Object.create()进行继承)

如下,对Child.prototype.getName子类中原型上属性或方法进行修改时,父类也被修改

javascript 复制代码
        function Parent(name) {
            this.name = name;
            console.log("父类构造函数");
        }

        Parent.prototype.getName = function () {
            console.log("父类getName");
        }

        function Child(name) {
            Parent.call(this, name);
        }
        Child.prototype = Parent.prototype;
        Child.prototype.constructor = Child;

        Child.prototype.getName = function(){
            console.log("子类getName");
        }

        var child = new Child("张三");
        console.log(child);//Child {name: '张三'}
        child.getName();
        var parent = new Parent("李四");
        parent.getName();

解决:加上Object.create()方法即可

javascript 复制代码
        // Child.prototype = Parent.prototype;
        Child.prototype = Object.create(Parent.prototype);

5.ES6的Class继承

实现原理:ES6新增,是ES5中构造函数+原型链继承组合继承,寄生组合式继承的结合

缺点:兼容性不好

6.扩展------对象的几种创建方式

  • 字面量创建
  • var obj = new Object()创建
  • 构造函数创建
  • Object.create()创建
javascript 复制代码
        // 字面量创建
        let obj1 = {
            name: 'lmf1',
            say() {
                console.log("lmf1 say");
            }
        }

        // new Object()创建
        let obj2 = new Object({
            name: 'lmf2',
            say() {
                console.log("lmf2 say");
            }
        });

        // 构造函数创建
        function Person(name) {
            this.name = name;
        }

        let obj3 = new Person("lmf3");
        Person.say = function () {
            console.log("静态方法");
        }
        Person.prototype.say = function () {
            console.log("lmf3 say");
        }

        // Object.create()创建
        let obj4 = Object.create(obj3);
        console.log(obj1, obj2, obj3, obj4);
相关推荐
yuezhilangniao1 小时前
AI智能体全栈开发工程化规范 备忘 ~ fastAPI+Next.js
javascript·人工智能·fastapi
铅笔侠_小龙虾3 小时前
Flutter Demo
开发语言·javascript·flutter
2501_944525543 小时前
Flutter for OpenHarmony 个人理财管理App实战 - 账户详情页面
android·java·开发语言·前端·javascript·flutter
wangdaoyin20103 小时前
若依vue2前后端分离集成flowable
开发语言·前端·javascript
天天进步20153 小时前
AI Agent 与流式处理:Motia 在生成式 AI 时代的后端范式
javascript
心柠3 小时前
vue3相关知识总结
前端·javascript·vue.js
常年游走在bug的边缘5 小时前
掌握JavaScript作用域:从函数作用域到块级作用域的演进与实践
开发语言·前端·javascript
极致♀雨5 小时前
vue2+elementUI table表格勾选行冻结/置顶
前端·javascript·vue.js·elementui
林shir5 小时前
3-15-前端Web实战(Vue工程化+ElementPlus)
前端·javascript·vue.js
换日线°6 小时前
前端炫酷展开效果
前端·javascript·vue