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 相关文章推荐
javascript判断机器是否联网的2种方法
Aug 09 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 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
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
python的多重继承的理解
2017/08/06 Python
python内置数据类型之列表操作
2018/11/12 Python
python opencv读mp4视频的实例
2018/12/07 Python
pandas ix &iloc &loc的区别
2019/01/10 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
护理专业自荐信范文
2014/02/26 职场文书
消防安全承诺书
2014/05/22 职场文书
2015年入党决心书
2015/02/05 职场文书
员工工作表现自我评价
2015/03/06 职场文书
综合素质评价自我评价
2015/03/06 职场文书
远程教育培训心得体会
2016/01/09 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电
Vue Element plus使用方法梳理
2022/12/24 Vue.js