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学习笔记 获取jQuery对象
Sep 19 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
JS字符串截取函数实例
Dec 27 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 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巧获服务器端信息
2006/12/06 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
JavaScript Array扩展实现代码
2009/10/14 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
Python之str操作方法(详解)
2017/06/19 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
留学推荐信中文范文三篇
2014/01/25 职场文书
财务科科长岗位职责
2014/03/10 职场文书
爱心捐款倡议书
2014/04/14 职场文书
高一学生评语大全
2014/04/25 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
先进工作者个人总结
2015/02/15 职场文书
幼儿园教师求职信
2015/03/20 职场文书
工程款申请报告
2015/05/15 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
宇宙与人观后感
2015/06/05 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
mysql部分操作
2021/04/05 MySQL
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
Vue全局事件总线你了解吗
2022/02/24 Vue.js