Javascript 中创建自定义对象的方法汇总


Posted in Javascript onDecember 04, 2014

Javascript 中创建对象,可以有很多种方法。

Object构造函数/对象字面量

抛开设计模式不谈,使用最基本的方法,就是先调用Object构造函数创建一个对象,然后给对象添加属性.

     var student = new Object();

     student.name = "xiao ming";

     student.age = 20;

     student.getName = function () {

         alert(this.name);

     }

熟悉javascript 对象字面量的同学,可以换一种更好的写法,至少看上去更简洁。
    var student = {

        name: "xiao hong",

        age: 18,

        getName: function () {

            alert(this.name);

        }

    };

 缺点:上面方法有个缺点就是,使用同一个接口创建很多类似的对象时,会产生大量重复的代码。这个应该很容易理解了,函数(方法或者类)一般是用来创建公共的方法,上面的对象创建过程,根本没有函数的影子,所以谈不上什么重用。

工厂模式

工厂模式 抽象了具体创建对象的过程。就像一个黑盒,你只要调用函数(进入工厂),并且传入相应参数(各种原材料),就会出来一个相应的对象(工厂生产的产品)。工厂模式解决了创建多个相似对象的问题。

     function studentFactory(name,age) {

         var student = new Object();

         student.name = name;

         student.age = age;

         student.sayName = function () {

             alert(this.name);

         }

         return student;

     }

     var p1 = studentFactory("ming", 20);

     var p2 = studentFactory("hong", 18);

缺点:工厂模式也有缺点,最大的缺点就是 对象类型识别的问题。只能判断出对象是Object 类型(p1 instanceof Object),而无法具体判断出来是哪种类型。使用工厂模式创建出来的student 其实都有着类似的属性和方法,只是值不同而已。这时 更好的解决方法是,创建一个Student 函数,这样所有的对象都属于 Student 类型。所以工厂模式不是不好,只是 构造函数模式更优。

自定义类型的构造函数:

构造函数可以用来创建特定类型的对象。

     function Student(name,age) {

         this.name = name;

         this.age = age;

         this.sayName = function () {

             alert(this.name);

         }

     }

     var p3 = new Student("ming", 20);

     var p4 = new Student("hong", 18);

     alert(p3 instanceof Student); 

alert(p3.sayName==p4.sayName); //false

缺点:自定义构造函数 的不足之处就是,每个对象都会重新创建自己的方法,其实这些方法功能是一样的(像 sayName),但是它们却不相同(p3.sayName 和p4.sayName不相等)。

原型模式:

定义一个空函数,然后把所有属性和方法都添加到原型上,这样所有的 对象都会共用这些属性和方法。

     function Student() {};

     Student.prototype.name = "ming";

     Student.prototype.age = 20;

     Student.prototype.friends = ['qi'];

     Student.prototype.sayName = function () {

         alert(this.name);

     };

缺点:有些属性不能共享,共享回来带来问题,例如:friends。每位同学的friends 大多都不会相同。

构造函数与原型的组合:

     function Student(name, age, friends) {

         this.name = name;

         this.age = age;

         this.friends = friends;

     }

     Student.prototype = {

         constructor: Student,

         sayName: function () {

             alert(this.name);

         }

     };

总结:构造函数与原型的组合 是一种获得广泛认可的创建自定义类型的方法。 也是上面这些方法中的最优方法。

/*************************************************************************************************************/

其实上面的创建对象的方法已经很多了,但是还是有可能出现一些比较特殊的场景,需要继续的优化。

动态原型模式:

它是构造函数与原型组合 的一种优化。对于那些共用的属性和方法,如果初始化之后,就不必再重复初始化,提高效率。

       function Student(name, age) {

           this.name = name;

           this.age = age;

           if ((typeof this.sayName) != "function") {

               Student.prototype.sayName = function () {

                   alert(this.name);

               }

           }

       }

       var stu = new Person("ming", 20);

       //alert(stu instanceof Student);

       stu.sayName();


var stuNew = new Person("hong", 18);



//alert(stuNew instanceof Student);



stuNew.sayName();

当创建多个student对象时,sayName 方法只会初始化一次。

最后还有一种很有用的创建对象的方式,就是稳妥构造函数。

稳妥构造函数模式:

在这个模式中会禁止使用this和new,所有对象没有公共的属性。只能读取变量的值,而不能修改。

      ////稳妥构造函数模式

      function Student(name, age) {

          var o = new Object();

          o.sayName = function () {

              alert(name);

          }

          return o;

      }

      var stu = Student("ming", 21);

      stu.sayName();

以上汇总了几种常见的Javascript创建自定义对象的方法,非常的全面,大家如有更好的,请联系我,本文持续更新。

Javascript 相关文章推荐
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
jquery.post用法之type设置问题
Feb 24 Javascript
js中settimeout方法加参数
Feb 28 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
js实现常见的工具条效果
Mar 02 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
vue获取form表单的值示例
Oct 29 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
dreamweaver 8实现Jquery自动提示
Dec 04 #Javascript
jquery实现动态画圆
Dec 04 #Javascript
javascript数组遍历for与for in区别详解
Dec 04 #Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 #Javascript
express的中间件cookieParser详解
Dec 04 #Javascript
express的中间件bodyParser详解
Dec 04 #Javascript
express的中间件basicAuth详解
Dec 04 #Javascript
You might like
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
PHP扩展开发入门教程
2015/02/26 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
帝国cms目录结构分享
2015/07/06 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
用js生产批量批处理执行命令
2008/07/28 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
Python函数嵌套实例
2014/09/23 Python
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
python实现程序重启和系统重启方式
2020/04/16 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
大学生个人自荐信
2014/02/24 职场文书
大班开学家长寄语
2014/04/04 职场文书
党员心得体会范文2016
2016/01/23 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
Nginx快速入门教程
2021/03/31 Servers
详解Laravel框架的依赖注入功能
2021/05/27 PHP