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 相关文章推荐
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
javascript 数组操作详解
Jan 29 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
java遇到微信小程序 "支付验证签名失败" 问题解决
Dec 22 Javascript
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
Zerg剧情介绍
2020/03/14 星际争霸
PHP parse_url 一个好用的函数
2009/10/03 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
脚本收藏iframe
2006/07/21 Javascript
文本链接逐个出现的js脚本
2007/12/12 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
python脚本和网页有何区别
2020/07/02 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
公司接待方案
2014/03/08 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL