JavaScript面向对象编程-优快云博客

本文通过四个实例详细解析了JavaScript面向对象编程的概念、属性访问、工厂模式以及解决没有new的问题，涵盖了创建对象、属性定义、函数应用及实例操作。

实例一：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
<script type="text/javascript">
	function CreatePerson() {
	}
	CreatePerson.prototype.name="Tom";
	CreatePerson.prototype.sex="男";
	CreatePerson.prototype.showName = function() {
		alert("我的名字是叫" + this.name);
	};
	CreatePerson.prototype.showAge = function() {
		alert("我是" + this.sex + "的");
	};
	var person1 = new CreatePerson();
	person1.showName();	//我的名字是叫Tom

	var person2 = new CreatePerson();
	person2.showName();	//我的名字是叫Tom
	alert(person1.showName == person2.showName); //true;
	alert(person1 == person2);	//false
</script>
</html>

实例二：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div>JavaScript面向对象编程，JavaScript中属性访问</div>
</body>
<script type="text/javascript">
	var book = {
		_year: 2004,
		edition: 1
	};
	Object.defineProperty(book, "year", {
		get: function() {
			return this._year;
		},
		set: function(newValue) {
			if(newValue > 2004) {
				this._year = newValue;
				this.edition += newValue - 2004;
			}
		}
	});
	book.year = 2005;
	alert(book.edition);//2
</script>
</html>

实例三：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div>JavaScript面向对象编程，工厂模式</div>
</body>
<script type="text/javascript">
	function createPerson(name,sex) {	//这个函数是用来创建一个对象的，就叫构造函数
		var person = new Object();
		person.name=name;
		person.sex=sex;
		person.showName=function() {
			alert("我的名字是叫" + this.name);
		};
		person.showAge = function() {
			alert("我是" + this.sex + "的");
		};
		return person;
	}
	var person1 = createPerson("Tom","男");
	var person2 = createPerson("Hanmeimei","女");
	person1.showName();	//我的名字是叫Tom
	person1.showAge();	//我是男的
	person2.showName();	//我的名字是叫Hanmeimei
	person2.showAge();	//我是女的
</script>
</html>

实例四：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div>JavaScript面向对象编程，解决没有new的问题</div>
</body>
<script type="text/javascript">
	function CreatePerson(name,sex) {
		//假想的系统内部工作流程
		//var this = new Object();
		this.name = name;
		this.sex = sex;
		this.showName = function() {
			alert("我的名字是叫" + this.name);
		};
		this.showAge = function() {
			alert("我是" + this.sex + "的");
		};
		//假想的系统内部工作流程
		//return this;
	}
	var person1 = new CreatePerson("Tom","男");
	var person2 = new CreatePerson("Hanmeimei","女");
	person1.showName();	//我的名字是叫Tom
	person1.showAge();	//我是男的
	person2.showName();	//我的名字是叫Hanmeimei
	person2.showAge();	//我是女的
</script>
</html>