原生JS里的对象继承与模式

本文深入探讨了JavaScript中各种继承方式的特点与应用场景,包括原型链继承、构造继承、实例继承、拷贝继承、组合继承及寄生组合继承。同时,讲解了工厂模式、构造函数模式、原型模式、单例模式和策略模式的实现与优势。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一 原生JS里面的对象继承

所有的JavaScript都会继承一个prototype原型对象,继承原型对象上的属性和方法。

  1. 原型链继承 : prototype 原型对象
    要继承就必须有父类:子类继承父类 ,继承父类的属性和方法;
    特点:实例可以继承自身实例的属性、父类里面的构造函数属性、父类的原型属性
    缺点:不能继承子类的原型属性和方法;太单一 ,只能单继承,不能进行多继承;继承之后原型对象上的属性全部是共享的;子类不能直接向父类传递参数。
  2. 构造继承:直接使用call、apply 继承,直接在子类的内部去写。
    优点: 可以实现多继承,可以向父类传递参数;
    缺点: 子类的实例是本身 ,不是父类;构造继承只能call apply 父类对象的构造属性和方法 , 不能复制原型属性和方法。
  3. 实例继承:原理是在子类里面直接构造父类的实例
    优点:可以传递给父类参数,不限制调用的方式;
    缺点:不能多继承;不能拿到子类的构造属性和方法;实例继承 子类的实例不是本身而是父类。
  4. 拷贝继承:将父类里面的属性方法拷贝给子类;
    子类的实例是本身,不是父类;子类向父类传递参数;
    优点:可支持多继承。
  5. 组合继承:构造继承+原型链继承,优缺点相互互补;
    子类的实例即是本身也是父类,没有原型对象属性的共享
    优点:实现多继承, 调用了两次父类的构造函数。
  6. 寄生组合继承:处理组合继承的缺点,避免两次调用父类的构造函数。
    原理:把父类的原型给予一个空对象的原型,子类对象的实例即是本身也是父类。

二 原生JS里面的模式

  1. 工厂模式。
    优点:避免创建多次对象
function Factory(n,s){
        //创建一个对象
        var obj={};
        obj.name=n;
        obj.sex=s;
        obj.sleep= function () {
            return this.name+"睡觉";
        };
        return obj;
    }
    console.log(Factory("李四", "男"));
    console.log(Factory("张三", "男"));
  1. 构造函数模式:直接定义函数,this(指针):指向当前实例的对象,里面的方法和属性直接写 this.***
    特点:没有明显的创建对象、没有返回值
function Page(){
        this.nowpage=1;
        this.totlepage=20;
        this.data=null;
        this.createpageLi= function () {
            console.log("构造函数模式的方法");
        }
    }

    //实例化对象
    var page=new Page();
    //直接调用
    console.log(page);
  1. 原型模式:原型对象上所有的属性和方法共享
function Person(){

    }
    //原型独享的属性和方法
    Person.prototype={
        name:"",
        sex:"",
        sleep: function (m) {
            return this.name+"睡觉"+m;
        }
    };
    var per1=new Person();
    per1.name="张三";
    per1.sex="男";
    console.log(per1);
    console.log(per1.sleep("打呼噜"));

    var per2=new Person();
    per2.name="李四";
    per2.sex="男";
    console.log(per2);
    console.log(per2.sleep("磨牙"));
  1. 单例模式: 一个类仅提供一个实例,并且暴露出一个全局访问点;
  2. 策略模式:将算法和算法的使用分离;
 //按照分数增加比例
    var levelable={
        S:8,
        A:6,
        B:4,
        C:2,
        D:0
    }
    //策略使用 策略集合
    var levelScore={
        baseScore:70,
        S: function () {
            return this.baseScore+levelable["S"];
        },
        A: function () {
            return this.baseScore+levelable["A"];
        },
        B: function () {
            return this.baseScore+levelable["B"];
        },
        C: function () {
            return this.baseScore+levelable["C"];
        },
        D: function () {
            return this.baseScore+levelable["D"];
        }
    }

    //得分情况
    function getScore(score,level){
        levelScore.baseScore=score;
        console.log(levelScore[level]());
    }
    getScore(60,"S");
    getScore(80,"A");
    getScore(70,"B");
    getScore(50,"C");
    getScore(90,"D");
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值