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 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 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模拟服务器实现autoindex效果的方法
2015/03/10 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
vue生成token并保存到本地存储中
2018/07/17 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
Python 中的range(),以及列表切片方法
2018/07/02 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
Django后台admin的使用详解
2019/07/08 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
八年级物理教学反思
2014/01/19 职场文书
大学生学习计划书
2014/09/15 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
老人节标语大全
2014/10/08 职场文书
2014年班主任工作总结
2014/11/08 职场文书
实习单位意见
2015/06/04 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server