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 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
Bootstrap Table使用整理(一)
Jun 09 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
微信小程序基于picker实现级联菜单
Feb 15 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写入数据库类代码分享
2011/07/26 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
smarty模板数学运算示例
2016/12/11 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
Javascript下的keyCode键码值表
2007/04/10 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
js面向对象编程总结
2017/02/16 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
python机器学习之随机森林(七)
2018/03/26 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
python读写LMDB文件的方法
2018/07/02 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
Python grpc超时机制代码示例
2020/09/14 Python
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
如何开发安全的AJAX应用
2014/03/26 面试题
升旗仪式主持词
2014/03/19 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
上下班时间调整通知
2015/04/23 职场文书
信息技术国培研修日志
2015/11/13 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js