• js 创建对象


    js 创建对象的几种方法

     

    在js中创建对象的方法可分为6种,分别是:基本模式、工厂模式、构造函数模式、原型模式、组合模式、动态原型模式,接下来分别看下这几种模式的写法吧

    一、基本模式

    复制代码
    var person = new Object();
            person.name = "孙悟空";
            person.weapon = "棒子";
            person.run = function () {
                return this.name + "武器是" + person.weapon;
            }
    复制代码

    缺点:1、当创建对象较多时会比较麻烦,2、各个对象之前看不出有什么关联
    为解决第1个问题接下来我们来介绍工厂模式

    二、工厂模式

    复制代码
    function creatPerson(name, weapon) {
                var person = new Object();
                person.name = "孙悟空";
                person.weapon = "棒子";
                person.run = function () {
                    return this.name + "武器是" + person.weapon;
                }
                return person;
            }
    复制代码

    缺点:1、实例之间没有联系;2、没有使用new关键字;3、会造成资源的浪费,每生成一个实例都会都会增加一些重复的内容
    缺点3如何理解呢:在多次调用creatPerson方法时,创建对象的方法run会生成多个,虽然多个对象的方法都是一样的。

    构造函数解决了多个实列之间没有联系的问题,可以用instanceof判断

    三、构造函数模式

    复制代码
    function creatPerson(name, weapon) {
                this.name = name;
                this.weapon = weapon;
                this.run = function () {
                    return this.name + "武器是" + this.weapon;
                }
            }
            //调用创建对象
            var wukou =new  creatPerson("孙悟空", "棒子");
    复制代码

    缺点:没有解决工厂模式浪费内存的缺点,每创建一个对象会增加很多重复的东西

    为了解决这个问题请看原型模式
    四、原型(Prototype)模式

    js中规定,每一个构造函数都有一个prototype属性,指向另一个对象,这个对象的所有属性和方法,都会被构造函数的实例继承,可以把那些不变的属性和方法直接定义在prototype对象上

    复制代码
     function personObj() { }
            personObj.prototype.name = "孙悟空";
            personObj.prototype.weapon = "棒子";
            personObj.prototype.run = function () {
                return this.name + "武器是" + this.weapon;
            }
            //创建对象
            var person = new personObj();
    
            //原型模式的另一种写法
            function personObj() { }
            personObj.prototype = {
                constructor: personObj,//强制指回personObj
                name: "孙悟空",
                weapon: "棒子",
                run: function () {
                    return this.name + "武器是" + this.weapon;
                }
            }
    复制代码

    缺点:构造函数没有参数,不能传参初始化值,因为不同的对象可能只共享方法,但是不会共享属性,为了解决这个问题请看构造函数和原型模式的组合模式,还解决了前面的所有缺点,Jquery就是使用的这种方法

    五、组合模式

    这样,不同的实例可有自己特有的属性,还有共享的方法

    复制代码
            function personObj(name,weapon) {
                this.name = name;
                this.weapon = weapon;
            }
            personObj.prototype = {
                run: function () {
                    return this.name + "武器是" + this.weapon;
                }
            }
            //创建对象
            var wukou = new personObj("孙悟空", "棒子");
    复制代码

    虽然这种创建对象的方式已经够我们使用了,平时使用这方式也没有问题的,当然还有一点小问题:对象中的属性和方法是分开的,请看动态原型方法

    六、动态原型模式

    复制代码
     function personObj(name, weapon) {
                this.name = name
                this.weapon = weapon
                if (typeof this.run != "function")
                {
                    personObj.prototype = {
                        run: function () {
                            return this.name + "武器是" + this.weapon;
                        }
                    }
                }
                
            }
            
            //创建对象
            var wukou = new personObj("孙悟空", "棒子");
    复制代码

    函数中使用 if (typeof this.run != "function") 目的是为了防止创建多个对象时,方法执行多次

  • 相关阅读:
    axios+post获取并下载后台返回的二进制流
    vue+ckEditor5
    金额大写转换(改进版)
    vue+axios请求头封装
    移动端h5+vue失焦搜索,ios和android兼容问题
    vue滚动+滑动删除标记(移动端)仿qq/微信
    重置 centos 7 密码
    发现好玩的——github + git 有意思的用法
    github 中使用 issues
    java代理模式与装饰模式
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/10488699.html
Copyright © 2020-2023  润新知