javascript工厂方式定义对象


Posted in Javascript onDecember 26, 2014

每一个函数对象都有一个length属性,表示该函数期望接收的参数个数。

<html> 

<head> 

<script type="text/javascript"> 

var add =function(num1,num2,num3){ 

    alert(num1+num2+num3); 

} 

alert(add.length); 

</script> 

</head> 

<body> 

</body> 

</html>

关于js面向对象的创建方式,

目标:

构建一个order对象.
包含三个属性:日期,金额,提交人 
包含一个方法:显示字符串:”XX在XXXX-XX-XX 提交了额度为:XXXX元的订单"

一 工厂方式

         <script type=text/javascript>

              /*

                   工厂方式:通过使用方法返回对象,使用时不需要通过new生成新对象.

              */

              function createOrder()//也可以构建带参数的工厂方法,根据传入的参数初始化对象数据.

              {

                   var order = new Object();

                   order.Date = "1990-1-1";

                   order.Price = "3200";

                   order.Name = "Vince Keny";

                   order.Show = function()//将show方法放在工厂中,则分别为每个实例创造一个Show方法.浪费资源是此模式的弊端.

                       {

                            alert(this.Name + " 在 " + this.Date + " 提交了额度为 " + this.Price + " 元的订单.")

                       }

                   return order;

              }

              //使用工厂模式返回对象:

              var order =  createOrder();

              //也可以这样使用,把工厂模式改造成"伪构造函数",因为在工厂中使用了new,所以创建对象时的new运算符将被忽律.

              var order2 = new createOrder();

              order.Show();

              order2.Show();

         </script>

二 构造函数方式

/*

     构造函数方式,方法的声明与工厂方式一样,也存在同同样的问题,同样可以提取出来.不同点是声明属性用this

    并且需要使用new运算符生成实例.

*/

function Order()

{

     this.Date = "1990-1-1";

     this.Price = "3200";

     this.Name = "Vince Keny";

     this.Show = function()

         {

              alert(this.Name + " 在 " + this.Date + " 提交了额度为 " + this.Price + " 元的订单.")

         }

}

 

var order = new Order();

order.Show();

三 原型方式

/*

     原型方式:使用prototype

*/

function Order()

{}

 

Order.prototype.Date = "1990-1-1";

Order.prototype.Price = "3200";

Order.prototype.Name = "Vince Keny";

Order.prototype.Show = function()

     {

         alert(this.Name + " 在 " + this.Date + " 提交了额度为 " + this.Price + " 元的订单.")

     }

var order = new Order();

order.Show();

四 混合 构造函数/原型 方式

/*

     混合构造函数/原型 方式 : 使用构造函数方式初始化属性字段,使用原型方式构造方法.

*/

function Order()

{

     this.Date = "1990-1-1";

     this.Price = "3200";

     this.Name = "Vince Keny";

}

Order.prototype.Show = function().

{

         alert(this.Name + " 在 " + this.Date + " 提交了额度为 " + this.Price + " 元的订单.")

}

var order = new Order();

order.Show();

五 动态混合方式

/*

     动态混合方式 : 和混合方式不同点在于声明方法的位置.将方法生命放到了构造函数内部,更符合面向对象.

*/

function Order()

{

     this.Date = "1990-1-1";

     this.Price = "3200";

     this.Name = "Vince Keny";

    

     if(typeof Order._initialized == "undefined")

     {

         Order.prototype.Show = function().

                       {

                            alert(this.Name + " 在 " + this.Date + " 提交了额度为 " + this.Price + " 元的订单.")

                       };

         Order._initialized = true;

     }

}
    function Car(sColor,iDoors){

        var oTempCar = new Object;

        oTempCar.color = sColor;

        oTempCar.doors = iDooes;

        oTempCar.showColor = function (){

            alert(this.color)

        };

        return oTempCar;

    }

    var oCar1 = new Car("red",4);

    var oCar2 = new Car("blue",3);

    oCar1.showColor();        //outputs "red"

    oCar2.showColor();        //outputs "blue"
Javascript 相关文章推荐
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
jQuery中click事件用法实例
Dec 26 #Javascript
javascript实现类似超链接的效果
Dec 26 #Javascript
浅析javascript操作 cookie对象
Dec 26 #Javascript
浅谈javascript对象模型和function对象
Dec 26 #Javascript
angularjs基础教程
Dec 25 #Javascript
jQuery中detach()方法用法实例
Dec 25 #Javascript
jQuery中remove()方法用法实例
Dec 25 #Javascript
You might like
PHP4实际应用经验篇(8)
2006/10/09 PHP
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
Python with的用法
2014/08/22 Python
Python判断字符串与大小写转换
2015/06/08 Python
Python缩进和冒号详解
2016/06/01 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
python交互式图形编程实例(二)
2017/11/17 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
浅谈Python 参数与变量
2020/06/20 Python
python中xlrd模块的使用详解
2021/02/01 Python
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
仓库管理专业个人的自我评价
2013/12/30 职场文书
大学班级文化建设方案
2014/05/06 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
北京故宫导游词
2015/01/31 职场文书
庆元旦主持词
2015/07/06 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python
Redis三种集群模式详解
2021/10/05 Redis