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中if语句的几种优化代码写法
Mar 12 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
简述vue中的config配置
Jan 23 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
layui的select联动实现代码
Sep 28 Javascript
vue实现选中效果
Oct 07 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
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
JQUERY操作JSON实例代码
2010/02/09 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Python 正则表达式(转义问题)
2014/12/15 Python
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
python解析基于xml格式的日志文件
2017/02/25 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
python 经典数字滤波实例
2019/12/16 Python
基于python3的socket聊天编程
2020/02/17 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
公务员政审单位鉴定材料
2014/05/16 职场文书
工程部部长岗位职责
2015/02/12 职场文书
总经理聘用协议书
2015/09/21 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
GPU服务器的多用户配置方法
2022/07/07 Servers