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 相关文章推荐
javascript 无提示关闭窗口脚本
Aug 17 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 Javascript
vue.js表格分页示例
Oct 18 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
详解AngularJS 模块化
Jun 14 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
详解jQuery-each()方法
Mar 13 jQuery
详解基于Vue/React项目的移动端适配方案
Aug 23 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
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
基于python实现雪花算法过程详解
2019/11/16 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
厨房领班竞聘演讲稿
2014/04/23 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
七一慰问简报
2015/07/20 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
浅谈怎么给Python添加类型标注
2021/06/08 Python