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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
JavaScript实现京东快递单号查询
Nov 30 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
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
php自定文件保存session的方法
2014/12/10 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
python编写微信公众号首图思路详解
2019/12/13 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
建筑设计所实习生自我鉴定
2013/09/25 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
高中数学教学反思
2014/01/30 职场文书
委托书样本
2014/04/02 职场文书
2014年教研组工作总结
2014/11/26 职场文书
社区活动总结
2015/02/04 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
八月一日观后感
2015/06/10 职场文书
母亲节感言
2015/08/03 职场文书
公司晚宴祝酒词
2015/08/11 职场文书