`
啸笑天
  • 浏览: 3462089 次
  • 性别: Icon_minigender_1
  • 来自: China
社区版块
存档分类
最新评论

JavaScript 对象

阅读更多

对象与数组
JavaScript中的对象本质上是一个关联数组,或者说更像java里的?Map数据结构,由key-value组成。如下:

<script>
	function Person(name , age)
	{
		//将name、age形参的值分别赋给name、age实例属性。
		this.name = name;
		this.age = age;
		this.info = function()
		{
			alert('info method!');
		}
	}
	var p = new Person('yeeku' , 30);
	for (propName in p)
	{
		//遍历Person对象的属性
		document.writeln('p对象的' + propName 
			+ "属性值为:" + p[propName] + "<br />");
	}
</script>
 


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
JavaScript对象都都基于相同基类(Object)的实例,因此所有的JavaScript对象之间没有明显的继承关系,而且JavaScript是一种动态语言,它允许自由地为对象增加属性和方法,当程序为对象的某个不存在的属性赋值时,即可认为是为该对象增加属性。例如:
var p={};
p.age=30;
p.info=function(){
alert("info menthod");
}

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
关于prototype

<script>    
	//创建Person函数
	function Person(name , age)
	{
		this.name = name;
		this.age = age;
		//为Person对象指定info方法
		this.info = function()
		{
			//输出Person实例的name和age属性
			document.writeln("姓名:" + this.name);
			document.writeln("年龄:" + this.age);
		}
	}
	//创建Person实例p1
	var p1 = new Person('yeeku' , 29);
	//执行p1的info方法
	p1.info();
	document.writeln("<hr />");
	//创建Person实例p2
	var p2 = new Person('wawa' , 20);
	//执行p2的info方法
	p2.info();
</script>
 上述代码定义了Person函数的同时,也定义了一个Person类,而且该函数就是该Person类的构造器。
但上面为Person对象增加info方法相当不好,有两点原因:
1,性能低下:每次创建实例都会创建info()函数,会造成内存泄漏,引起性能下降,实际上info()方法一个就好了
2,使得info()函数中的局部变量产生闭包:闭包会扩大局部变量的作用域,使得局部变量一直存活到函数之外的的地方。例如:

<script>
	//创建Person函数
	function Person()
	{
		//locVal是个局部变量,原本应该该函数结束后立即失效
		var locVal = '疯狂Java联盟';
		this.info = function()
		{
			//此处会形成闭包
			document.writeln("locVal的值为:" + locVal);
			return locVal;
		}
	}
	var p = new Person();
	//调用p对象的info()方法
	var val = p.info();
	//输出val返回值,该返回值就是局部变量locVal。
	alert(val);
</script>
 
为了避免这两种情况,通常不在函数定义(也就是类定义)中直接为该函数定义方法,而是使用prototype属性。JavaScript所有的类(也就是函数)都有一个prototype属性,在为JavaScript类的prototype属性增加函数,属性时,即可视为对原有的的扩展。我们可以理解为增加了prototype属性的类继承了原有的类——这就是JavaScript所提供的伪继承机制。
如下:

<script>
	//定义一个Person函数,同时也定义了Person类
	function Person(name , age)
	{
		//将局部变量name、age赋值给实例属性name、age
		this.name = name;
		this.age = age;
		//使用内嵌的函数定义了Person类的方法
		this.info = function()
		{
			document.writeln("姓名:" + this.name + "<br />");
			document.writeln("年龄:" + this.age + "<br />");
		}
	}
	//创建Person的实例p1
	var p1 = new Person('yeeku' , 29);
	//执行Person的info方法
	p1.info();
	//此处不可调用walk方法,变量p还没有walk方法
	//将walk方法增加到Person的prototype属性上
	Person.prototype.walk = function()
	{
		document.writeln(this.name + '正在慢慢溜达...<br />');
	}
	document.writeln('<hr />');
	//创建Person的实例p2
	var p2 = new Person('leegang' , 30);
	//执行p2的info方法
	p2.info();
	document.writeln('<hr />');
	//执行p2的walk方法
	p2.walk();
	//此时p1也具有了walk方法——JavaScript允许为类动态增加方法和属性
	//执行p1的walk方法
	p1.walk();
</script>
伪继承实质上是修改了原来的类,而不是产生一个新的之类,所以原来没有walk()方法的Person类将不存在了。 
上面的程序也说明了JavaScript是一门动态语言,不仅可以为对象动态增加属性和方法,还可以为动态增加属性和方法!



还可以通过使用prototype属性,可以对JavaScript的内建类进行扩展。如下:
<script>
	//为Array增加indexof方法,将该函数增加到prototype属性上
	Array.prototype.indexof = function(obj)
	{
		//定义result的值为-1
		var result = -1;
		//遍历数组的每个元素
		for (var i = 0 ; i < this.length ; i ++)
		{
			//当数组的第i个元素值等于obj时
			if (this[i] == obj)
			{
				//将result的值赋为i,并结束循环。
				result = i;
				break;
			}
		}
		//返回元素所在的位置。
		return result;
	}
	var arr = [4, 5, 7, -2];
	//测试为arr新增的indexof方法
	alert(arr.indexof(-2));
</script>
 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

与传统面向对象程序设计语言不同的是,JavaScript中的函数永远是独立的,函数永远是一等功民,函数永远不会从属于其他类,对象。即使这个还个函数是匿名内嵌函数。如下:

<script>
	//定义Dog函数,等同于定义了Dog类
	function Dog(name , age , bark)
	{
		//将name、age、bark形参赋值给name、age、bark实例属性
		this.name = name;
		this.age = age;
		this.bark = bark;
		//使用内嵌函数为Dog实例定义方法
		this.info = function()
		{
			return this.name + "的年纪为:" + this.age
				+ ",它的叫声:" + this.bark;
		}
	}
	//创建Dog的实例
	var dog = new Dog("旺财" , 3 , '汪汪,汪汪...');
	//创建Cat函数,对应Cat类
	function Cat(name,age)
	{
		this.name = name;
		this.age = age;
	}
	//创建Cat实例。
	var cat = new Cat("kitty" , 2);
	//将dog实例的info方法分离出来
	var tmp = dog.info;
	//通过function的call方法完成cat的调用info方法
	alert(tmp.call(cat));
</script>
 JavaScript中的方法调用有两种方式:
1,正常方法    obj.method(args...)
2,方法回调    method.call(obj,args...)


--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
JavaScript建对象
大致三种方法:
使用关键字new创建对象

<script>
	//定义一个函数,同时也定义了一个Person类
	function Person(name , age)
	{
		//将name、age形参赋值给name、age实例属性
		this.name = name;
		this.age = age;
	}
	//分别以两种方式创建Person实例
	var p1 = new Person();
	var p2 = new Person('yeeku' , 29);
	//输出p1的属性
	document.writeln("p1的属性如下:"
		+ p1.name + p1.age + "<br />");    
	//输出p2的属性
	document.writeln("p2的属性如下:" 
		+ p2.name + p2.age);
</script>
 

使用Object创建即时对象

<script>
	var myObj = new Object();
	myObj.info = new Function("document.writeln('对象的name属性:' + this.name);"
		+ "document.writeln('<br />');"
		+ "document.writeln('对象的age属性:' + this.age)");
	document.writeln("<hr / >");
	myObj.name = 'yeeku';
	myObj.age = 29;
	//为对象增加方法
	
	myObj.info();
</script>



<script>
	//创建空对象
	var myObj = new Object();
	//为空对象增加属性
	myObj.name = 'yeeku';
	myObj.age = 29;
	//创建一个函数
	function abc()
	{
		document.writeln("对象的name属性:" + this.name);
		document.writeln("<br />");
		document.writeln("对象的age属性:" + this.age);
	};
	//将已有的函数添加为对象的方法
	myObj.info = abc;
	document.writeln("<hr>");
	//调用方法
	myObj.info();
</script>
 

使用JSON语言创建对象

<script>
	//代码
	var person =
	{
		//定义第一个简单属性
		name : 'wawa',
		//定义第二个简单属性
		age : 29 ,
		//定义第三个属性:数组
		schools : ['小学' , '中学' , "大学"],
		//定义第四个属性,对象数组
		parents :[
			{
				name : 'father',
				age : 60,
				address : '广州'
			} 
			,
			{
				name : 'mother',
				age : 58,
				address : '深圳'
			}
		],
              //定义方法
              info:function(){
              alert("hello world");
               }
	};
	alert(person.parents[0].name);
</script>
 







分享到:
评论
1 楼 issac0216 2011-03-16  
写的太好了

相关推荐

    javascript对象转换成json

    在JavaScript中,我们可以使用内置的`JSON.stringify()`方法将JavaScript对象转换为JSON字符串。 ### JSON.stringify()方法 `JSON.stringify()`是JavaScript中的全局函数,用于将JavaScript值转换为JSON字符串。它...

    javascript对象参考手册

    JavaScript对象是编程语言的核心组成部分,尤其在Web开发中扮演着至关重要的角色。"JavaScript对象参考手册"涵盖了这一主题的广泛内容,旨在为开发者提供全面、深入的理解和实用指南。手册分为20个章节,不仅涉及...

    JavaScript对象笔记.rar

    什么是对象 简单点说,编程语言中的对象是对现实中事物的简化。例如,我们一个人就是一个对象,但是编程...在后面的JavaScript对象笔记中,记录了菜鸟在学习JavaScript对象的大多数资源,希望这些资源对你也有价值。

    深入浅出JavaScript对象模型

    ### 深入浅出JavaScript对象模型 #### JavaScript对象的本质 根据ECMA262规范,ECMAScript被定义为一种基于对象的语言而非传统的面向对象语言。这意味着在JavaScript中,对象被视为存储数据的一种大型数组形式,...

    04JavaScript对象相关内容总结.docx

    JavaScript对象是编程中的一种核心概念,它是一种复合数据类型,能够存储多个不同数据类型的属性。在JavaScript中,对象可以通过多种方式创建,其中一种常见的方法是使用`new`关键字和构造函数,例如`new Object()`...

    JavaScript对象创建总结

    javascript对象创建方法总结,通过这些方法的总结,可以对对象有了更深一步的了解,也加深了对对象的巩固认识。

    第8节 JavaScript对象.rar

    第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 JavaScript对象.rar第8节 ...

    JavaScript对象模型

    ### JavaScript对象模型详解 #### 一、概述 在JavaScript中,对象模型是其核心特性之一,它决定了数据的存储方式以及程序的运行机制。本文旨在深入解析JavaScript对象模型的关键概念,包括基本数据类型、对象、...

    JavaScript对象定义

    JavaScript对象定义是编程语言中的核心概念,它在Web开发中起着至关重要的作用。JavaScript是一种基于原型的对象导向语言,它的对象定义方式具有独特的灵活性。在本文中,我们将深入探讨JavaScript对象的定义、创建...

    04 第四章 JavaScript对象及初识面向对象.md

    04 第四章 JavaScript对象及初识面向对象.md

    javascript对象大全

    ### JavaScript对象大全详解 #### 一、JavaScript简介 JavaScript 是一种强大的、解释型的脚本语言,由 Netscape 公司开发,最初被命名为 LiveScript。随着 Web 技术的发展,JavaScript 成为了网页开发中不可或缺...

    JavaScript 对象.pdf

    JavaScript 对象 JavaScript 中的对象是非常重要的概念,所有事物都是对象,包括字符串、数值、数组、函数等等。对象只是带有属性和方法的特殊数据类型。布尔型、数字型、字符串也可以是一个对象,日期是一个对象,...

    JavaScript对象经典小册 chm

    本小册"JavaScript对象经典小册 chm"深入探讨了JavaScript中的核心概念——对象和数组,旨在帮助开发者更好地理解和掌握这些基础知识。 一、JavaScript对象 1. 对象概述:JavaScript对象是一种数据结构,它由键值对...

    JavaScript对象共6页.pdf.zip

    JavaScript对象是编程语言JavaScript中的核心概念,它在Web开发中起着至关重要的作用。JavaScript是一种基于原型的动态类型语言,其对象系统是其灵活性和强大功能的基础。在深入理解JavaScript对象之前,我们需要先...

    javascript对象

    JavaScript对象是编程语言JavaScript的核心组成部分,它是一种复杂的数据结构,用于存储和操作数据。JavaScript对象是基于原型的,这意味着每个对象都可以从另一个对象继承属性和方法。这种特性使得JavaScript非常...

    JavaScript对象模型-执行模型

    JavaScript对象模型(Object Model)和执行模型是理解JavaScript工作原理的关键概念。JavaScript是一种基于原型的动态类型语言,其对象模型是其核心特性之一。本文将深入探讨JavaScript的对象模型和执行模型,以及...

Global site tag (gtag.js) - Google Analytics