js的对象--js详解(十二)

最新推荐文章于 2022-12-21 19:18:53 发布

xiaosa3134

最新推荐文章于 2022-12-21 19:18:53 发布

阅读量81

点赞数

分类专栏： js 文章标签： js对象 js的obj js详解微风

本文链接：https://blog.csdn.net/xiaosa3134/article/details/84795879

版权

js 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

1、通过Object来创建

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	/**
	 * 在js中并不存在类，所以可以直接通过Object来创建对象
	 * 但是使用如下方式创建，带来最大的问题是，由于没有类的约束
	 * 无法实现对象的重复利用，并且没有一种约定，在操作时会带来问题
	 */
	var person = new Object();
	person.name = "Leon";
	person.age = 33;
	person.say = function() {
		alert(this.name+","+this.age);
	}
	</script>
</head>
<body>
</body>
</html>

2、通过json格式来创建

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	/**
	 * json的意思就是javascript simple object notation
	 * json就是js的对象，但是它省去了xml中标签，而是通过{}来完成对象的说明
	 */
	var person = {
		name:"张三",//通过属性名:属性值来表示，不同的属性通过,来间隔
		age:23,
		say:function() {
			alert(this.name+","+this.age);
		}//最后一个属性之后不能有,
	}
	
	person.say();
	/**
	 * 通过json依然可以创建对象数组，创建的方式和js的数组一样
	 */
	var ps = [
		{name:"Leon",age:22},
		{name:"Ada",age:33}
	];
	for(var i=0;i<ps.length;i++) {
		alert(ps[i].name);
	}
	/**
	 * 创建一组用户，用户的属性有
	 * name:string,age:int,friends:array
	 * List<Person> ps = new ArrayList<Person>();
	 * ps.add(new Person("Leon",22,["Ada","Alice"]));
	 * ps.add(new Person("John",33,["Ada","Chris"]));
	 * 把ps转换为json
	 */
	ps = [
		{
			name:"Leon",
			age:22,
			friends:["Ada","Alice"]
		},
		{
			name:"John",
			age:33,
			friends:["Ada","Chris"]
		}
	];
	</script>
</head>
<body>
</body>
</html>

3、通过工厂方式来创建

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	/**
	 * 通过工厂的方式来创建Person对象
	 * 在createPerson中创建一个对象
	 * 然后为这个对象设置相应的属性和方法
	 * 之后返回这个对象
	 */
	function createPerson(name,age) {
		var o = new Object();
		o.name = name;
		o.age = age;
		o.say = function() {
			alert(this.name+","+this.age);
		}
		return o;
	}
	/**
	 * 使用工厂的方式，虽然有效的解决了类的问题，但是依然存在另外一个问题
	 * 我们无法检测对象p1和p2的数据类型
	 */
	var p1 = createPerson("Leon",22);
	var p2 = createPerson("Ada",33);
	alert(typeof p1); //Object
	alert(typeof p2); //Object
	p1.say();
	p2.say();
	
	</script>
</head>
<body>
</body>
</html>

4、通过构造函数来创建

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	/**
	 * 通过构造函数的方式创建，和基于工厂的创建类似
	 * 最大的区别就是函数的名称就是类的名称，按照java的约定，第一个
	 * 字母大写。使用构造函数创建时，在函数内部是通过this关键字来
	 * 完成属性的定义
	 */
	function Person(name,age) {
		this.name = name;
		this.age = age;
		//以下方式带来的问题是所有的对象都会为该行为分配空间
		// this.say = function() {
			// alert(this.name+","+this.age);
		// }
		this.say = say;
	}
	/**
	 * 将行为设置为全局的行为，如果将所有的方法都设计为全局函数的时候
	 * 这个函数就可以被window调用，此时就破坏对象的封装性
	 * 而且如果某个对象有大 量的方法，就会导致整个代码中充斥着大量的全局函数
	 * 这样将不利于开发
	 */
	function say() {
		alert(this.name+","+this.age);
	}
	/*
	 * 通过new Person来创建对象
	 */
	var p1 = new Person("Leon",22);
	var p2 = new Person("Ada",32);
	p1.say(); p2.say();
	/**
	 * 使用构造函数的方式可以通过以下方式来检测
	 * 对象的类型
	 */
	alert(p1 instanceof Person);
	/**
	 * 使用构造函数创建所带来的第一个问题就是每一个对象中
	 * 都会存在一个方法的拷贝，如果对象的行为很多的话
	 * 空间的占用率就会大大增加
	 * 可以将函数放到全局变量中定义，这样可以让类中的行为指向
	 * 同一个函数
	 */
	alert(p1.say==p2.say);
	</script>
</head>
<body>
</body>
</html>

5、通过原型方式创建

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>js01_hello</title>
	<meta name="author" content="Administrator" />
	<script type="text/javascript">
	/**
	 * 以下演示了通过原型的创建方式，使用基于原型的创建可以将属性和方法
	 * 设置为Person专有的，不能再通过window来调用
	 */
	function Person(){
		
	}
	Person.prototype.name = "Leon";
	Person.prototype.age = 23;
	Person.prototype.say = function() {
		alert(this.name+","+this.age);
	}
	var p1 = new Person();
	p1.say();
	//通过window没有办法调用say方法，如此就完成了封装
	// say();
	//这种纯原型的模式问题也很明显，所有的属性，方法都是共享的，不能让对象具体化。常常我们想每个对象有自己的属性。
	</script>
</head>
<body>
</body>
</html>

xiaosa3134

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的对象--js详解(十二)

1、通过Object来创建&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt;&lt;head&g
复制链接

扫一扫