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 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
jquery编写日期选择器
Mar 16 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
详解vue-router 初始化时做了什么
Jun 11 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 PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
JS异步处理的进化史深入讲解
2019/08/25 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
pyqt5实现登录界面的模板
2020/05/30 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
python修改文件内容的3种方法详解
2019/11/15 Python
Python如何绘制日历图和热力图
2020/08/07 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
机械设计职业生涯规划书
2013/12/27 职场文书
化学实验员岗位职责
2013/12/28 职场文书
小学毕业感言50字
2014/02/16 职场文书
二年级小学生评语
2014/04/21 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
新党员入党决心书
2015/09/22 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python