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中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 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中的global
2014/08/19 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
jQuery提交多个表单的小例子
2013/06/30 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
最简单的JS实现json转csv的方法
2019/01/10 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
python 发送json数据操作实例分析
2019/10/15 Python
Python笔记之观察者模式
2019/11/20 Python
python小白切忌乱用表达式
2020/05/29 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
python实现AdaBoost算法的示例
2020/10/03 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
学校安全教育制度
2014/01/31 职场文书
产品质量保证书
2014/04/29 职场文书
专项资金申请报告
2015/05/15 职场文书
webpack的移动端适配方案小结
2021/07/25 Javascript
python利用while求100内的整数和方式
2021/11/07 Python
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS
golang语言指针操作
2022/04/14 Golang