• js 对象创建设计模式


    创建js对象可以使用多种模式,每种模式有着不同的特点:如下:

    1.工厂模式:创建一个函数,在函数中实例化一个对象,当每次调用函数时,就实例化一个对象,并返回这个对象;

    我们知道,对象是引用形式的,每次实例化一个对象,就是在内存中开辟一个内存空间,所以每次实例化出来的内存空间是不一样的

    一旦执行完调用,就是一个返回一个新对象,和原先调用的函数对象没有关系了

     1   <script>
     2         function createPeraon(name, age, job) {
     3             var o = new Object();
     4             o.name = name;
     5             o.age = age;
     6             o.job = job;
     7             o.sayName = function() {
     8                 console.log(this.name);
     9             }
    10             return o;
    11         }
    12 
    13         var person1 = createPeraon('huanying2015', 25, '程序员工程师');
    14         var person2 = createPeraon('aluoha', 26, '架构师');
    15         person1.sayName();
    16         person2.sayName();
    17     </script>

    备注:解决了创造多个相似对象的问题

    2. 构造函数模式:

    函数也是对象,创建一个函数,然后对这个函数的属性和方法进行设置。当需要新对象时,直接实例化这个对象函数,在实例化的时候,一起初始化必要属性,这样,就生成了一个新的对象,构造函数的属性和方法在实例化的新对象中都有,只是对参数进行了初始化

    构造函数中,没有返回值

    所以,构造函数要想创建新对象,就需要使用 new  来调用

     1  <script>
     2         function Person(name, age, job) {
     3             this.name = name;
     4             this.age = age;
     5             this.job = job;
     6             this.sayName = function() {
     7                 console.log(this.name);
     8             }
     9         }
    10         var aa = Person('nanna', 18, '学生');
    11         console.log(aa); // undefined   没有返回值
    12         var person1 = new Person('huanying2015', 25, '程序员工程师');
    13         var person2 = new Person('aluoha', 26, '架构师');
    14         person1.sayName();
    15         person2.sayName();
    16     </script>

    备注:构造函数的问题,是每个方法都要在实例上重新创建一遍,这样就会造成很多浪费

    3.原型模式:

    我们把对象的属性和方法都放到函数原型上,这样,在调用的时候,不必重新创建属性和方法,直接就可以调用了;

    原型上的属性和方法可以实现共享

     1     <script>
     2         function Person() {};
     3         Person.prototype.name = "huanying2015";
     4         Person.prototype.age = 25;
     5         Person.prototype.job = "架构师";
     6         Person.prototype.sayName = function() {
     7             console.log(this.name);
     8         }
     9         var person1 = new Person();
    10         person1.sayName();
    11         var person2 = new Person();
    12         person2.sayName();
    13         console.log(person1.sayName == person2.sayName)
    14     </script>

     备注:缺点:引用类型的属性如果进行修改,会影响其它实例的结果,因为都指向同一个内存空间

    4.构造+原型模式

    综合构造和原型模式:把私有属性和方法放在构造函数中,把共有属性和方法放在原型中,这样,私有属性和方法的修改,只会影响操作对象的本身,不会对其他实例造成影响

     1   <script>
     2         function Person(name, age, job) {
     3             this.name = name;
     4             this.age = age;
     5             this.job = job;
     6             this.friends = ['hali', 'jack'];
     7         }
     8         Person.prototype = {
     9             constructor: Person,
    10             sayName: function() {
    11                 console.log(this.name);
    12             }
    13         }
    14 
    15         var person1 = new Person('huanying2015', 25, '首席架构师');
    16         var person2 = new Person('aluoha', 27, '常务事务官');
    17 
    18         person1.sayName();
    19         person2.sayName();
    20         console.log(person1.sayName == person2.sayName);
    21         person1.friends.push('zhangsan');
    22 
    23         console.log(person1.friends);
    24         console.log(person2.friends);
    25     </script>

    5. 动态原型模式:

    把所有信息都封装在构造函数中,通过在构造函数中初始化原型(在必要的情况下),又保持了同时使用构造函数和原型的优点。即可以通过先检查某个方法是否 存在有效,来决定是否需要初始化原型

     <script>
            function Person(name, age, job) {
                this.name = name;
                this.age = age;
                this.job = job;
                this.friends = ['hali', 'jack'];
                if (typeof this.sayName != "function") {
                    Person.prototype.sayName = function() {
                        console.log(this.name);
                    }
                }
            }
    
            var person1 = new Person('huanying2015', 25, '首席架构师');
            var person2 = new Person('aluoha', 27, '常务事务官');
    
            person1.sayName();
            person2.sayName();
            console.log(person1.sayName == person2.sayName);
        </script>

    6.寄生构造函数模式:

     1     <script>
     2         function Person(name, age, job) {
     3             var o = new Object();
     4             o.name = name;
     5             o.age = age;
     6             o.job = job;
     7             o.sayName = function() {
     8                 console.log(this.name);
     9             }
    10             return o;
    11         }
    12 
    13         var person1 = new Person('huanying2015', 25, '首席架构师');
    14         person1.sayName();
    15     </script>

    这里:和工厂模式类似,只是使用new 来调用。引申一下,如下:

     1    <script>
     2         function Person() {
     3             var values = new Array();
     4             values.push.apply(values, arguments);  // 借用数组的方法,将arguments 压入数组对象中
     5             values.toPipedString = function() {    // 数组对象的方法
     6                 return this.join("---->");
     7             }
     8             return values;
     9         }
    10 
    11         var person1 = new Person('huanying2015', 25, '首席架构师');
    12         console.log(person1.toPipedString());
    13     </script>

    备注:返回的对象与构造函数,及构造函数的原型之间,没有任何关系,所以,不能使用instanceof 操作符来确定对象类型

    7.稳妥构造函数模式:(这里没有搞懂,是瞎写的,以后再来修改)

    稳妥构造模式遵循与寄生构造模式类似的模式,也有不同:1.新创建对象的方法,不引用this;2.不使用构造函数调用构造函数

     1   <script>
     2         function Person(name, age, job) {
     3             var o = new Object();
     4             o.name = name;
     5             o.age = age;
     6             o.job = job;
     7             o.sayName = function() {
     8                 console.log(name);
     9             }
    10             return o;
    11         }
    12 
    13         var person1 =  Person('huanying2015', 25, '首席架构师');
    14         person1.sayName();
    15     </script>

  • 相关阅读:
    python 多线程实例
    手把手教你做酷炫的数据可视化大屏,零基础的你仅需6步
    化繁为简:数据库运维人员应该知道这些...
    凭什么它能成为报表神器?这五大技术硬货不得不服
    《算法图解》学习笔记(九):动态规划(附代码)
    前端布局总结(持续更新)
    前端布局总结(持续更新)
    前端布局总结(持续更新)
    前端布局总结(持续更新)
    linux之centos安装jdk以及nginx详细过程
  • 原文地址:https://www.cnblogs.com/huanying2015/p/8745488.html
Copyright © 2020-2023  润新知