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 相关文章推荐
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
js获取 type=radio 值的方法
May 09 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
深入探寻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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
图片完美缩放
2006/09/07 Javascript
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
JS中操作JSON总结
2020/12/06 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
appium+python adb常用命令分享
2020/03/06 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
CSS3 简写animation
2012/05/10 HTML / CSS
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
2014年文学毕业生自我鉴定
2014/04/23 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技