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 相关文章推荐
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 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
一个MYSQL操作类
2006/11/16 PHP
浅析php数据类型转换
2014/01/09 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
PHP反射机制用法实例
2014/08/28 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
javascript Base类 包含基本的方法
2009/07/22 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
python实现扫描日志关键字的示例
2018/04/28 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
饮料业务员岗位职责
2013/12/15 职场文书
冬季安全检查方案
2014/05/23 职场文书
党员作风建设自查报告
2014/10/23 职场文书