您的位置：首页 > Web前端 > JavaScript

JavaScript学习笔记3-JavaScript定义对象的四种方式

2015-08-30 20:42 931 查看

JavaScript中定义对象的几种方式（JavaScript中没有类的概念，只有对象）

1）基于已有对象扩充其属性和方法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

<script type="text/javascript">

var object = new Object();

object.name = "zhangsan";
object.sayName = function(name)
{
	this.name = name;
	alert(this.name);
}

object.sayName("lisi");
</script>
 </head>

 <body>
  
 </body>
</html>

</pre><pre name="code" class="javascript">

2）工厂方式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

<script type="text/javascript">

//工厂方式创建对象

function createObject()
{
	var object = new Object();

	object.username = "zhangsan";
	object.password = "123";

	object.get = function()
	{
		alert(this.username + ", " + this.password);
	}

	return object;
}

var object1 = createObject();
var object2 = createObject();

object1.get();

//带参数的构造方法：
function createObject(username, password)
{
	var object = new Object();

	object.username = username;
	object.password = password;

	object.get = function()
	{
		alert(this.username + ", " + this.password);
	}

	return object;
}

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

</script>
 </head>

 <body>
  
 </body>
</html>

工厂方法创建对象的改进的做法，让一个函数对象会被多个对象所共同使用。

哪个object调用的这个get方法，this就是指的这个对象。让一个函数对象被多个对象所共享，而不是每一个对象拥有一个函数对象。

function get()
{
	alert(this.username + ", " + this.password); 
}

function createObject(username, password)
{
	var object = new Object();

	object.username = username;
	object.password = password;

	object.get = get;

	return object;
}

var object = createObject("zhangsan", "123");
var object2 = createObject("lisi", "456");

object.get();
object2.get();

3）构造函数方式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

<script type="text/javascript">
/*
function Person()
{
    //在执行第一行代码前，js引擎会为我们生成一个对象 this
	this.username = "zhangsan";
	this.password = "123";

	this.getInfo = function()
	{
		alert(this.username + ", " + this.password);
	}

	//此处有一个隐藏的return语句，用于将之前生成的对象返回
}

只有以new的方式生成该对象才会出现以上两行注释中出现的情况，这是与工厂方法不一样的地方（没有new）
var person = new Person();
person.getInfo();
*/

function Person(username, password)
{
	this.username = username;
	this.password = password;

	this.getInfo = function()
	{
		alert(this.username + ", " + this.password);
	}
}

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

</script>

 </head>

 <body>
  
 </body>
</html>

4）原型（“prototype”）方式

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

如果使用原型方式对象，那么生成的所有对象会共享原型中的属性，这样一个对象改变了该属性也会反应到其他对象当中。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

<script type="text/javascript">

//使用原型（prototype）方式创建对象

/*给对象的原型增加了属性或者方法，就可以宣称原型所处的这个对象就拥有了这个属性*/

/*
function Person()
{

}

Person.prototype.username = "zhangsan";
Person.prototype.password = "123";

Person.prototype.getInfo = function()
{
	alert(this.username + ", " + this.password);
}

var person = new Person();
var person2 = new Person();

person.username = "lisi";

person.getInfo();
person2.getInfo();
*/

function Person()
{

}

Person.prototype.username = new Array();
Person.prototype.password = "123";

Person.prototype.getInfo = function()
{
	alert(this.username + ", " + this.password);
}

var person = new Person();
var person2 = new Person();

person.username.push("zhangsan");
person.username.push("lisi");
person.password = "456";

person.getInfo();
person2.getInfo();

</script>

 </head>

 <body>
  
 </body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航