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 面向对象的5钟写法
Jul 31 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
javascript实现标签切换代码示例
May 22 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
Vue 同步异步存值取值实现案例
Aug 05 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
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
PHP反射API示例分享
2016/10/08 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
python requests 使用快速入门
2017/08/31 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
如何查看python关键字
2021/01/17 Python
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
init进程的作用
2012/04/12 面试题
行政助理岗位职责
2013/11/10 职场文书
总经理助理的八要求
2013/11/12 职场文书
初级党校心得体会
2014/09/11 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
暂停营业通知
2015/04/25 职场文书
合同补充协议书
2016/03/24 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书