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 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
Vue表单控件数据绑定方法详解
Feb 05 Javascript
Vue 数据绑定的原理分析
Nov 16 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
微信公众平台接口开发入门示例
2014/12/24 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
Python之str操作方法(详解)
2017/06/19 Python
由面试题加深对Django的认识理解
2019/07/19 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
python正则表达式实例代码
2020/03/03 Python
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
开放系统互连参考模型
2016/06/29 面试题
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
中文专业求职信
2014/06/20 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
学生会辞职信
2015/03/02 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL