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 相关文章推荐
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 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
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
如何实现JS函数的重载
2006/09/22 Javascript
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
小学教育见习报告
2014/10/31 职场文书
2014年体育部工作总结
2014/11/13 职场文书
财政局长个人总结
2015/03/04 职场文书
社区重阳节活动总结
2015/03/24 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
爱国之歌(8首)
2019/09/29 职场文书
Python入门之基础语法详解
2021/05/11 Python
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python
Vue h函数的使用详解
2022/02/18 Vue.js
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js