javascript 构造函数方式定义对象


Posted in Javascript onJanuary 02, 2015

javascript是动态语言,可以在运行时给对象添加属性,也可以给对象删除(delete)属性

<html> 

<head>

<script type="text/javascript">

/*

//01.定义对象第一种方式

var object =new Object();

alert(object.username);

//01.1增加属性username

object["username"]="liujianglong";

//object.username="liujl";

alert(object.username);

//01.2删除属性username

delete object.username;//username属性已经从object对象中删除

alert(object.username);

*/

//02.定义对象第二种方式--在javascript中定义对象的一种最常见的方式

var object={name:"zhangsan",age:10,sex:"fale"};

alert(object.name);

alert(object.age);

alert(object.sex);

</script>

</head>         

<body>

</body>

</html>

属性名:方法名  也是可以的.因为函数本身就是个对象

javascript 数组排序

<!DOCTYPE html>

<html> 

<head>

<script type="text/javascript">

var array=[1,3,25];

/////////////////////////////////

var compare=function(num1,num2){

    var temp1=parseInt(num1);

    var temp2=parseInt(num2);

    if(temp1<temp2){

        return -1;

    }else if(temp1==temp2){

        return 0;

    }else{

        return 1;

    }

}

//array.sort(compare);//01.函数名是对象引用

////////////////////////////////
//02.匿名函数方式//////////////////

array.sort(function c(num1,num2){

var temp1=parseInt(num1);

    var temp2=parseInt(num2);

    if(temp1<temp2){

        return -1;

    }else if(temp1==temp2){

        return 0;

    }else{

        return 1;

    }

});

/////////////////////////////////

alert(array);

</script>

</head>         

<body>

</body>

</html>

javascript中定义对象的几种方式(javascript中没有类的概念,只有对象 )

第一种方式: 基于已有对象扩充其属性和方法

<script type="text/javascript">

//01.基于已有对象扩充其属性和方法

var object=new Object();

object.username="zhangsan";

object.sayName=function (name){

    this.username=name;

    alert(this.username);

}

alert(object.username);

object.sayName("lisi");

alert(object.username);

</script>

这种方法具有局限性,因为javascript不像java那样具有类的概念,写一个类,之后new就可以得到一个具有了这些属性、方法的对象了。

这时如果要拥有object2就只能把上面来的代码再写一份,这是不太好的。

第二种方式: 工厂方式

           类似于java中静态的工厂方法。

<!DOCTYPE html>

<html> 

<head>

<script type="text/javascript">

//对象工厂方法

var  createObject=function(){

    var object=new Object();

    object.username="zhangsan";

    object.password="123";

    object.get=function(){

        alert(this.username+" , "+object.password); 

    }

    return object;

}

var obj1=createObject();

var obj2=createObject();

obj1.get();

//修改对象2的密码

obj2["password"]="123456";

obj2.get();

</script>

</head>         

<body>

</body>

</html>

上面这种方式创建对象有弊端(每个对象都有一个get方法,从而浪费了内存),改进后的工厂方式( 所有对象共享一个get方法):

<!DOCTYPE html>

<html> 

<head>

<script type="text/javascript">

//所有对象共享的get方法

var get=function(){

    alert(this.username+" , "+this.password);

}

//对象工厂方法

var createObject=function(username,password){

    var object=new Object();

    object.username=username;

    object.password=password;

    object.get=get;//注意:这里不写方法的括号

    return object;

}

//通过工厂方法创建对象

var object1=createObject("zhangsan","123");

var object2=createObject("lisi","345");

//调用get方法

object1.get();

object2.get();

</script>

</head>         

<body>

</body>

</html>

第三种方式: 构造函数方式 定义对象

<!DOCTYPE html>

<html> 

<head>

<script type="text/javascript">

var get=function(){

    alert(this.username+" , "+this.password);

}

function Person(username,password){

    //在执行第一行代码前,js引擎会为我们生成一个对象

    this.username=username;

    this.password=password;

    this.get=get;

    //在此处,有一个隐藏的return语句,用于返回之前生成的对象[这点是和工厂模式不一样的地方]

}

var person=new Person("zhangsan","123");

person.get();

</script>

</head>         

<body>

</body>

</html>

第四种方式: 原型(Prototype)方式创建对象

prototype是object对象中的属性,所有person对象也可以拥有prototype这个属性。

可以给对象的原型增加一些属性,方法。

单纯的使用原型方式创建对象的缺点:①无法传参数,只能在对象创建后再改变它的值

                                                      ②可能会导致程序错误

<!DOCTYPE html>

<html> 

<head>

<script type="text/javascript">

function Person(){

}

Person.prototype.username="zhangsan";

Person.prototype.password="123";

Person.prototype.getInfo=function(){

    alert(this.username+" , "+this.password);

}

var person1=new Person();

var person2=new Person();

person1.username="lisi";

person1.getInfo();

person2.getInfo();

</script>

</head>         

<body>

</body>

</html>
<!DOCTYPE html>

<html> 

<head>

<script type="text/javascript">

function Person(){

}

Person.prototype.username=new Array();

Person.prototype.password="123";

Person.prototype.getInfo=function(){

    alert(this.username+" , "+this.password);

}

var person1=new Person();

var person2=new Person();

person1.username.push("wanglaowu");

person1.username.push("wanglaowu2");

person2.password="456";

person1.getInfo    ();

person2.getInfo();

</script>

</head>         

<body>

</body>

</html>

单纯使用原型方式定义对象无法再构造函数中为属性赋初值,只能在对象生成后再去改变属性值。

第五种方式: 使用原型+构造函数方式来定义对象----推荐使用

对象之间的属性互不干扰
各个对象之间共享同一个方法

<!DOCTYPE html>

<html> 

<head>

<script type="text/javascript">

//使用原型+构造函数方式来定义对象

function Person(){

    //属性 定义在构造函数中

    this.username=new Array();

    this.password="123";

}

    //方法 定义在原型中

Person.prototype.getInfo=function(){

    alert(this.username+" , "+this.password);

}

var p1=new Person();

var p2=new Person();

p1.username.push("zhangsan");

p2.username.push("lisi");

p1.getInfo();

p2.getInfo();

</script>

</head>         

<body>

</body>

</html>

第六种方式: 动态原型方式----推荐使用

         在构造函数中通过标志量让所有对象共享一个方法,而每个对象拥有自己的属性。

<!DOCTYPE html>

<html> 

<head>

<script type="text/javascript">

var Person=function (username,password){

    this.username=username;

    this.password=password;

    if(typeof Person.flag=="undefined"){

        alert("invoked");

        Person.prototype.getInfo=function(){

            alert(this.username+" , "+this.password);

        }

        Person.flag=true;    

    }

}

var p1=new Person("zhangsan","123");

var p2=new Person("lisi","456");

p1.getInfo();

p2.getInfo();

</script>

</head>         

<body>

</body>

</html>
Javascript 相关文章推荐
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 Javascript
深入探寻javascript定时器
Jan 02 #Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 #Javascript
JavaScript中的null和undefined区别介绍
Jan 01 #Javascript
JavaScript中的全局对象介绍
Jan 01 #Javascript
原生javascript获取元素样式
Dec 31 #Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 #Javascript
jQuery中:last-child选择器用法实例
Dec 31 #Javascript
You might like
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
基于Jquery的温度计动画效果
2010/06/18 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
使用PYTHON接收多播数据的代码
2012/03/01 Python
python列表操作实例
2015/01/14 Python
Python复制文件操作实例详解
2015/11/10 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
中医专业应届生求职信
2013/11/17 职场文书
化学实验员岗位职责
2013/12/28 职场文书
高中军训感言500字
2014/02/24 职场文书
项目建议书模板
2014/05/12 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python