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 学习之二 属性(类)
Nov 25 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
antd table按表格里的日期去排序操作
Nov 17 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之sphinx
2013/05/15 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
Three.js快速入门教程
2016/09/09 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
Python的面向对象思想分析
2015/01/14 Python
Python字符串切片操作知识详解
2016/03/28 Python
深入理解python多进程编程
2016/06/12 Python
Python 多线程Threading初学教程
2017/08/22 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
python 获取url中的参数列表实例
2018/12/18 Python
python截取两个单词之间的内容方法
2018/12/25 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
Django ModelForm操作及验证方式
2020/03/30 Python
英国现代绅士品牌:Hackett
2017/12/17 全球购物
三星英国官网:Samsung英国
2018/09/25 全球购物
邹越感恩父母演讲稿
2014/08/28 职场文书
2014年接待工作总结
2014/11/26 职场文书
小学班主任心得体会
2016/01/07 职场文书