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 相关文章推荐
图片之间的切换
Jun 26 Javascript
javascript引用对象的方法代码
Aug 13 Javascript
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
js实现倒计时关键代码
May 05 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 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 实现explort() 功能的详解
2013/06/20 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
python 实现敏感词过滤的方法
2019/01/21 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
大学毕业感言100字
2014/02/03 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
常务副总经理任命书
2014/06/05 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
锅炉工岗位职责
2015/02/13 职场文书
表扬信范文
2015/05/04 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
Python中的程序流程控制语句
2022/02/24 Python
Python图像处理库PIL详细使用说明
2022/04/06 Python