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 相关文章推荐
改版了网上的一个js操作userdata
Apr 27 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
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
晶体管来复再生式二管收音机
2021/03/02 无线电
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
简单的php文件上传(实例)
2013/10/27 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
jquery 插件开发备注
2010/08/27 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
jquery foreach使用示例
2013/09/12 Javascript
js获取url传值的方法
2015/12/18 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
Python正确重载运算符的方法示例详解
2017/08/27 Python
Python对象的属性访问过程详解
2020/03/05 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
妇科医生自荐信
2013/11/05 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
先进党员事迹材料
2014/12/24 职场文书
见习期个人总结
2015/03/05 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
python实现网络五子棋
2021/04/11 Python
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB
服务器间如何实现文件共享
2022/05/20 Servers