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 DOM 元素ID就是全局变量
Sep 20 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
Node.js的包详细介绍
Jan 14 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
js创建对象的方法汇总
Jan 07 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
Vue 事件处理操作实例详解
Mar 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
YB217、YB235、YB400浅听
2021/03/02 无线电
十天学会php之第九天
2006/10/09 PHP
解析argc argv在php中的应用
2013/06/24 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python编写简单的HTML页面合并脚本
2016/07/11 Python
python去除文件中重复的行实例
2018/06/29 Python
python生成n个元素的全组合方法
2018/11/13 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
python中class的定义及使用教程
2019/09/18 Python
python脚本和网页有何区别
2020/07/02 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
24岁生日感言
2014/01/13 职场文书
学历公证书范本
2014/04/09 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
护士求职信
2014/07/05 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
违反交通法规检讨书
2014/09/10 职场文书
中学音乐课教学反思
2016/02/18 职场文书
初中物理教学反思
2016/02/19 职场文书