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 相关文章推荐
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
JS实现选项卡实例详解
Nov 17 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 Javascript
JavaScript 数组去重详解
Sep 15 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
php自动适应范围的分页代码
2008/08/05 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
javascript some()函数用法详解
2014/11/13 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
部署Python的框架下的web app的详细教程
2015/04/30 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
python将数组n等分的实例
2019/12/02 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
工程管理造价应届生求职信
2013/11/13 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
进步之星获奖感言
2014/02/22 职场文书
兽医医药专业求职信
2014/07/27 职场文书
小学生手册家长意见
2015/06/03 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers